Question

我试图用JQuery和HTML / CSS创建一个下拉列表。 LINK 1在鼠标悬停时很好地滑动下拉列表，但是我无法让LINK 3工作相同。如果所有人都能提供一些帮助，我将不胜感激。谢谢！

的Javascript

$(document).ready(function() {
    $(".main_bar > li").hover(function() {
        $(this).find(".sub_bar").slideDown(200);
    }, function() {
        $(this).find(".sub_bar").slideUp(200);
    });
});

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <meta charset="utf-8" />
    <link rel="stylesheet" href="stylesheet.css" type="text/css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <title></title>
</head>
<body>
    <nav>
        <ul class="main_bar">
            <li>LINK1
                <ul class="sub_bar">
                    <li>LINK1</li>
                    <li>LINK2</li>
                    <li>LINK3</li>
                </ul>
            </li>
            <li>LINK2</li>
            <li>LINK3</li>
                <ul class="sub_bar">
                    <li>LINK1</li>
                    <li>LINK2</li>
                    <li>LINK3</li>
                </ul>
            <li>LINK4</li>
        </ul>
    </nav>
</body>
</html>

CSS

* {
    margin:0px;
    padding:0px;
}

ul {
    list-style:none;
}

ul.main_bar > li {
    float:left;
    width:25%;
    text-align:center;
}

ul.sub_bar {
    display:none;
}

Answer 1

这只是因为你太早意外关闭了<li>。

<li>LINK3</li>
  <ul class="sub_bar">
    <li>LINK1</li>
    <li>LINK2</li>
    <li>LINK3</li>
  </ul>

应该是：

<li>LINK3
  <ul class="sub_bar">
    <li>LINK1</li>
    <li>LINK2</li>
    <li>LINK3</li>
  </ul>
</li>

希望这有帮助！：）

JQuery下拉列表问题

1 个答案: