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

【问题标题】：Creating nav bar with dropdowns using bootstrap and jQuery使用 bootstrap 和 jQuery 创建带有下拉菜单的导航栏
【发布时间】：2015-06-17 20:03:33
【问题描述】：

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

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

这可能是父/子问题，但我不知道如何只选择一个菜单以使用 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);

【问题讨论】：

标签： jquery css twitter-bootstrap drop-down-menu

【解决方案1】：

通过写作

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

您正在定位与选择器匹配的所有元素 - 所有下拉菜单。

你需要做的是：

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

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

另外，考虑将函数绑定到<li class="dropdown">。这样，当您在<ul class="dropdown-menu"> 上向下移动鼠标时，菜单不会消失。这是因为当您将鼠标悬停在 <ul class="dropdown-menu"> 时，您也将鼠标悬停在其父级 <li class="dropdown"> 上，并且您可能不想仅仅因为不再悬停菜单标题而隐藏您的子菜单。

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

【讨论】：

我找到了所有元素定位部分，但不知道如何选择一个元素。成功了，谢谢！

【解决方案2】：

这也将确保您的下拉菜单在真正离开主 .dropdown LI 之前不会消失

var main = function() {

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

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

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

【讨论】：

【解决方案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>

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

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

和：

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

【讨论】：