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

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(); ” -> 这将引用所有具有子下拉菜单的父母并显示菜单。我们需要引用当前悬停父级。请检查以下链接中的工作示例。

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

Answer 4

有很多好的解决方案可以使用 jQuery 和 CSS 来显示下拉菜单。所以你不需要重新发明轮子。这里有一些examples，您也许可以找到满足您需求的。