Question

我有以下菜单结构（3个级别）

<nav>
    <li><a href="#">Home</a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" role="button" href="">
            Dropdown <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Dropdown 1</a></li>
            <ul class="dropdown-menu" style="display:none">
                <li><a href="#">Sub sub 1</a></li> 
                <li><a href="#">Sub sub 2</a></li>
            </ul>
            <li><a href="#">Dropdown 2</a></li>
            <ul class="dropdown-menu" style="display:none">
                <li><a href="#">Sub sub 3</a></li> 
                <li><a href="#">Sub sub 4</a></li>
            </ul>
        </ul>
</nav>

基本上，我想要做的是当我将鼠标悬停在＆＃34; Dropdown 1＆＃34;我只看到与此相关的子菜单.. I.e. （子分1，分2）。当我点击＆＃34;下拉2＆＃34;我得到（子sub 3）和（sub sub 4）。

我试过了：

var subMenu = $(this).parent().find('ul');
subMenu.show();

这是子菜单，但它显示的是所有子菜单，而不仅仅是我已经悬停过的子菜单。

我能做些什么来限制，只有正在盘旋的子菜单显示？

Answer 1

li和ul元素不能有兄弟关系。将内部ul元素包装在li标签中。

和使用.next()选择器作为点击元素li需要li元素作为下一个兄弟：

<强>标记：

<nav>
<li><a href="#">Home</a></li>
<li class="dropdown">
    <a class="dropdown-toggle" role="button" href="">
        Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">Dropdown 1</a></li>
        <li style="display:none">
        <ul class="dropdown-menu" >
            <li><a href="#">Sub sub 1</a></li> 
            <li><a href="#">Sub sub 2</a></li>
        </ul>
        </li>
        <li><a href="#">Dropdown 2</a></li>
         <li style="display:none">
        <ul class="dropdown-menu">
            <li><a href="#">Sub sub 3</a></li> 
            <li><a href="#">Sub sub 4</a></li>
        </ul>
        </li>
    </ul>

<强>脚本：

var subMenu = $(this).next();
subMenu.show();

<强> Working Demo

JQuery Navigation - 如何只显示一个元素而不是全部元素

1 个答案: