使用 bootstrap 和 jQuery 创建带下拉菜单的导航栏

Question

抱歉，如果之前有人问过这个问题，但我找不到直接的答案。

我是 css 和 jQuery 的新手，我正在尝试创建一个包含菜单和子菜单的导航栏，并使用下拉菜单打开每个 单独的菜单。

这可能是一个 parent/child 问题，但我无法弄清楚如何 select 只有一个下拉菜单 jQuery，因为现在全部悬停时打开菜单。

我做错了什么？感谢您的帮助！

HTML:

<div class="menu">
    <div class="container">
        <ul>
            <li class="dropdown">
                <a href=# class="dropdown-toggle" data-toggle="dropdown">menu1</a>
                <ul class="dropdown-menu">
                    <li><a href="#">sub menu1</a></li>
                    <li><a href="#">sub menu2</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href=# class="dropdown-toggle" data-toggle="dropdown">menu2</a>
                <ul class="dropdown-menu">
                    <li><a href="#">sub menu1</a></li>
                    <li><a href="#">sub menu2</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href=# class="dropdown-toggle" data-toggle="dropdown">menu3</a>
                <ul class="dropdown-menu">
                    <li><a href="#">sub menu1</a></li>
                    <li><a href="#">sub menu2</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

jQuery:

var main = function() {

$('.dropdown-toggle').hover(function() {
    $('.dropdown-menu').toggle();
}); }$(document).ready(main);

Answer 1

这也将确保您的下拉列表不会消失，直到他们真正离开主 .dropdown LI

var main = function() {

$('.dropdown').hover(function() {

    //on hover
    $('.dropdown-menu', this).toggle();
}, function() {

     //on mouseout
     $('.dropdown-menu', this).toggle();
}); }$(document).ready(main);

Answer 2

通过写作

$('.dropdown-menu').toggle();

您正在定位与 select 或 - 所有下拉菜单相匹配的所有元素。

您需要做的是：

var main = function() {
    $('.dropdown-toggle').hover(function() {
        $(this).parent().find('.dropdown-menu').toggle();
    });
};
$(document).ready(main);

所以我们首先 select 悬停元素 ($(this))，然后沿着 DOM 树向上移动到 <li class="dropdown"> (.parent())，并在其中我们找到 .dropdown-menu (.find('.dropdown-menu')).

此外，考虑将函数绑定到 <li class="dropdown">。这样，当您在 <ul class="dropdown-menu"> 上向下移动鼠标时，菜单不会消失。这是因为当您悬停 <ul class="dropdown-menu"> 时，您也悬停了它的 parent、<li class="dropdown">，并且您可能不想仅仅因为您没有悬停您的 sub-menu 就隐藏您的 sub-menu不再有菜单标题。

边注，但很重要：请不要忘记将 aria-haspopup="true" 添加到您的 <li class="dropdown"> 元素以增强可访问性和触摸支持。

Answer 3

这应该能为您指明正确的方向

DEMO.

<!-- Parent Menu -->
<ul class="dropdown-menu" id="parentMenu"
    role="menu" aria-labelledby="dropdownMenu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>

    <!-- Child Menu -->
    <li class="dropdown-submenu">
        <a tabindex="-1" href="#">More options</a>
        <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#">Second level</a></li>

            <!-- Grandchild Menu -->
            <li class="dropdown-submenu">
                <a href="#">More..</a>
                <ul class="dropdown-menu">
                    <li><a href="#">3rd level</a></li>
                    <li><a href="#">3rd level</a></li>
                </ul>
            </li>

            <li><a href="#">Second level</a></li>
            <li><a href="#">Second level</a></li>
        </ul>
    </li>
</ul>

如果您不希望它在单击之前开始显示；在菜单包装器的 css 中简单地 display:none;。然后创建一个点击功能来显示。

$( "#clickme" ).click(function() {
  $( "#parentMenu" ).show( "slow", function() {
    // Animation complete.
  });
});

和：

<div id="clickme">Wanna see me cool menu?</div>
<!-- full menu mark up below here -->

使用 bootstrap 和 jQuery 创建带下拉菜单的导航栏

Creating nav bar with dropdowns using bootstrap and jQuery

css

jquery

twitter-bootstrap

drop-down-menu