Question

我一直在关注jquery下拉插件。它们都不像我想的那样发挥作用。

我需要编写一个简单的脚本，它本质上是一个下拉菜单。

有一系列与一类div（不是孩子或父母）相匹配的唯一ID的简单系列。我希望子菜单在主菜单li上悬停下来。

因此，HTML看起来像：

<ul>
   <li id="number1"><a href="#">Link</a></li>
   <li id="number2"><a href="#">Link</a></li>
</ul>
<div class="number1">
Div stuff...
</div>
<div class="number2">
More stuff...
</div>

我遇到了一些麻烦，我非常感谢你的帮助！

Answer 1

将另一个CSS类分配给子菜单，如此

<div class="number1 isSubMenu">
Div stuff...
</div>
<div class="number2 isSubMenu">
More stuff...
</div>

然后以下jQuery应该这样做（考虑到你完成了定位子菜单所需的所有CSS工作）：

$("li > a").bind("mouseenter",function(){
    var _li=$(this).parent();
    $(".isSubMenu").slideUp("fast");
    $("."+_li.attr("id")).stop().slideDown("slow");
});

上面的代码没有经过优化，但它应该让你对如何做到这一点有一个很好的了解....

编辑：根据您的评论，在javascript和css方面都有一些工作要做，以获得完美的工作下拉菜单系统。使用上面的代码，您需要移动子菜单，成为LI元素的子元素......所以，稍后您可以在LI上绑定mouseleave事件以隐藏它的子元素。因为它是mouseleave而不是mouseout，所以当鼠标移动LI和它的子子菜单时它将起作用....

如果你想要一个更全面的解决方案，试试this和this ......他们大多使用CSS，但是使用javascript来降级旧浏览器。快速浏览这两个项目中的代码应该可以让您对如何完成此操作有充分的了解......

Answer 2

您可以尝试以下内容：

<script language="javascript">
    $(document).ready(function() {
        var id = $(this).attr("id");

        $("#Links li").hover(function() {
            $("." + id).slideDown("slow");
        }, function() {
            $("." + id).slideUp("slow");
        });
    });
</script>

<ul id="Links">
    <li id="number1"><a href="#">Link</a></li>
    <li id="number2"><a href="#">Link</a></li>
</ul>

<div class="number1">
    Div stuff...
</div>
<div class="number2">
    More stuff...
</div>

Answer 3

您需要在悬停函数内调用$（this）.attr（'id'）来捕获正确的元素ID。我假设div也会像下面的例子一样隐藏。

<script>

        $(document).ready(
        function() {
                $('ul li').hover(
                        function() {
                                var target = $(this).attr('id');
                                $("." + target).slideDown('slow');
                        },
                        function() {
                                var target = $(this).attr('id');
                                $("." + target).slideUp('slow');
                        }
                );
        });

</script>

<ul>
   <li id="number1"><a href="#">Link</a>
    <div class="number1" style="display:none;">
    Div stuff...
    </div>
   </li>
   <li id="number2"><a href="#">Link</a>
    <div class="number2" style="display:none;">
    More stuff...
    </div>
</li>
</ul>

jQuery中的自定义下拉菜单

3 个答案: