Question

我正试图制作一个愚蠢的水平导航栏，其中包含一些项目的下拉列表。我决定这样做的方法就是将下拉列表放在div标签中。这很容易改变，我只是不喜欢在HTML方面做得很重。

基本上，当你将鼠标悬停在父元素上时，我只想让我的下拉工作。额外的css将用于使其漂亮和定位更好。

这是我的js：

var dropdown = $('.dropdown');
var parent = dropdown.parent();
$(parent).hover(
    function () {
        dropdown.css('display', 'block');
    }
);

这是我的css：

div.nav {
    text-align: center;
}
div.nav > ul > li {
    margin-top: 15px;
    text-align: center;
    font-size: 1.25em;
}
div.nav > ul > li {
    display: inline-block;
    list-style-type: none;
}
div.nav a {
    padding: 1em;
}
div.dropdown {
    display: none;
    background-color: black;
    position: absolute;
}

这是我的html：

<div class="nav">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li>
            <a href="game.html">Sample Game</a>
            <div class="dropdown">
                <a href="index.html">About it</a>
                <br>
                <a href="index.html">Game</a>
            </div>
        </li>
        <li><a href="solutions.html">TP Solutions</a></li>
        <li><a href="projects.html">Projects</a></li>
        <li><a href="contact.html">Contact Me</a></li>
    </ul>
<div class="clear"></div>

Answer 1

你不应该使用“parent”作为变量名，因为它是一个保留字。

$(document).ready(function() {
    var $dropdown = $('.dropdown'),
        $parent = $dropdown.parent();
    $parent.on("mouseover",
        function () {
            $dropdown.css('display', 'block');
        }
    );
    $parent.on("mouseout",
        function () {
            $dropdown.css('display', 'none');
        }
    );
});

Answer 2

根据矿工的说法，必须这样做：

首先添加一个jQuery插件
然后添加您的脚本

所以订单会是这样的：

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'>
</script>

<script>
   $(function(){
      var dropdown = $('.dropdown');
      var parent = dropdown.parent();
      $(parent).hover(function () {
         dropdown.css('display', 'block');
      });
   });
</script>

Answer 3

请尝试以下代码。

    $(".nav").on("mouseenter","li",function(){
        $(this).find(".dropdown").show();
    });
    $(".nav").on("mouseleave","li",function(){
        $(this).find(".dropdown").hide();
    });

在您的代码“dropdown.parent（）;” - ＆gt;这将引用所有有孩子下拉菜单并将显示菜单的父母。我们需要引用当前的悬停父级。请查看以下链接中的工作示例。

http://jsfiddle.net/renjith/wX48f/

Answer 4

有很多很好的解决方案可以使用jQuery和CSS来显示下拉菜单。所以你不需要重新发明轮子。以下是一些examples，您可以找到符合您需求的{{3}}。

在父元素上悬停期间，显示子节点（下拉导航）

4 个答案: