Question

我想在鼠标悬停时显示下拉菜单。现在我使用2 divs并使用slideup显示子菜单的另一个div;我想在鼠标悬停时使用1 div显示子菜单。我怎么能这样做？

这是我的代码：

<!DOCTYPE html>
<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("#flip").mouseover(function () {
                $("#panel").slideDown("slow");
            });
            $("#flip").mouseleave(function () {
                $("#panel").slideUp("slow");
            });
        });
    </script>

    <style type="text/css">
        #flip {
            padding: 1px;
            text-align: left;
            border: solid 1px #c3c3c3;
        }
        #panel {
            padding: 1px;
            text-align: left;
            border: solid 1px #c3c3c3;
            padding: 5px;
            display: none;
        }
    </style>
</head>

<body>
    <div id="flip">
        <ul>Home</ul>
    </div>
    <div id="panel">
        <ul><a href="#">Sub</a>
            </br>
            <a href="#">Sub</a>
            </br>
            <a href="#">Sub</a>
            <ul>
    </div>
</body>

</html>

`

Answer 1

嵌套的无序列表可以使用，如下所示：

<ul id="flip">
    <li>Home
        <ul id="panel">
            <li><a href="#">Sub</a></li>
            <li><a href="#">Sub</a></li>
            <li><a href="#">Sub</a></li>
        </ul>
    </li>
</ul>

在CSS中，您只需要隐藏子菜单：

#panel {
    display:none;
}

jQuery和你一样。

见这里：http://jsfiddle.net/kaizora/23uuL/

PS：如果您使用的是<ul>标记，则在有效的HTML中，除了<li>标记外，其他任何内容都不应该。

Answer 2

这个怎么样：

$("#flip").mouseover(function () {
      $("#panel").slideDown("slow");

      $("#panel").mouseleave(function () {
          $("#panel").slideUp("slow");
      });
});

在这里小提琴：http://jsfiddle.net/vWGsC/

Answer 3

如果你想冷，也可以使用纯CSS。

<ul class="nav">
<li class="dropdown">
    <a href="#">Home</a>
      <ul>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li class="dropdown">
            <a href="#">second dropdown</a>
            <ul>
                <li><a href="#">...</a></li>
            </ul>
        </li>
    </ul>
</li>

这是我前段时间保存的html。

试一试！：）

http://jsfiddle.net/patrickhaede/dqxm4/

Answer 4

DEMO背景颜色用于清楚地查看用户。

  var temp = $('#flip ul li:eq(0)').nextAll();
    temp.hide();
    $('#flip ul').mouseenter(function(event) {
        temp.slideDown("slow");
    });
    $('#flip ul').mouseleave(function() {
        temp.slideUp("slow");
    });

#flip li , #flip ul { list-style-type: none; background-color: yellow;}

主页

子

子

子

同一个div中的jQuery下拉菜单

4 个答案: