使用引导程序和jQuery创建具有下拉列表的导航栏

对不起，如果此问题之前已被询问，但无法找到直接答案。使用引导程序和jQuery创建具有下拉列表的导航栏

我是新来的CSS和jQuery，我试图创建一个菜单和子菜单的导航栏，并使用下拉菜单打开每个个人菜单。

这可能是一个父母/孩子isuue，但我不知道如何选择一个菜单下拉使用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);

来源

2015-06-17 Bar Margalit

通过书写

$('.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菜单（ .find('.dropdown-menu')）。

此外，请考虑将函数绑定到<li class="dropdown">。这样，当您在<ul class="dropdown-menu">上移动鼠标时，菜单不会消失。这是因为当你翱翔<ul class="dropdown-menu">时，你也将鼠标悬停在其父母<li class="dropdown">上，并且你可能不希望隐藏子菜单，只是因为你没有将菜单标题悬停。

一个备注，但很重要：请不要忘记将aria-haspopup="true"添加到您的<li class="dropdown">元素中，以增强辅助功能和触控支持。

来源

2015-06-17 20:07:33

我想通了，所有的元素目标的一部分，但不知道如何选择一个元素。工作，谢谢！ –

添加代码与解释:) –

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

var main = function() { 

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

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

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

来源

2015-06-17 20:06:42

这应该指向你在正确的方向

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 -->

来源

2015-06-17 20:08:59

使用引导程序和jQuery创建具有下拉列表的导航栏

回答

相关问题