jquery - 点击下拉菜单

我相对较新的jquery，我正在寻求帮助。其目的是点击附加到ul的列表项并在其他列表项消失时出现。只有活动的一个是可见的jquery - 点击下拉菜单

我遇到的问题是，当我点击另一个列表项时，活动的一个消失（按照预期），但它不透露另一个，它仍然隐藏。我正在寻找一种方法来显示列表，同时隐藏那些不活动的列表。

HTML：

<div id="secondary-nav"><!--secondary-nav-->  
    <ul> 
     <li><a href="#.html">Current Article</a> 
      <ul> 
       <li><a href="#.html">Example 1</a></li> 
      </ul> 
     </li> 
     <li class="active"><a href="#.html">Past Articles</a> 
      <ul> 
       <li><a href="#.html">Example 1</a></li> 
       <li><a href="#.html">Example 2</a></li> 
       <li><a href="#.html">Example 3</a></li> 
      </ul> 
     </li> 
    </ul> 
</div><!--/secondary-nav-->

CSS：

#secondary-nav { 
    float:left; 
    height:auto; 
    width:23%; /*210px*/ 
    border-right:2px solid #000; 
    position:relative; 
} 

/*heading styles*/ 
#secondary-nav ul li { 
    padding: 0 10px; 
    list-style-type: none; 
} 

#secondary-nav ul li a { 
    font-family:TrajanPro; 
    font-size:1em; 
    line-height: 32px; 
    color:#000; 
} 

/*links*/ 
#secondary-nav ul ul li a { 
    display: block; 
    font-family:TrajanPro; 
    font-size:0.9em; 
    line-height: 27px; 
    text-decoration: none; 
    color:#000; 
    transition: all 0.15s; 
} 

#secondary-nav ul li a:hover { 
    display:block; 
    color:#af2931; 
    text-decoration:underline; 
} 

#secondary-nav ul ul { 
    display: none; 
} 

#secondary-nav li.active ul { 
    display: block; 
} 
/css

使用1.7.1

$(document).ready(function(){ 
    $("#secondary-nav ul").click(function(){ 
     //slide up all the link lists 
     $("#secondary-nav ul ul").slideUp(); 
     //slide down the link list below the h3 clicked - only if its closed 
     if(!$(this).next().is(":visible")) 
     { 
      $(this).next().slideDown(); 
     } 
    }) 
})

来源

2014-02-24 user3345367

jQuery的尝试与

$("#secondary-nav ul ul").slideToggle();

Demo

来源

2014-02-24 06:33:27 Prashobh

-1

我得到它的工作（我认为），通过使两个变化：

更改第2行选择这样：
```
"#secondary-nav ul li" 
```
这意味着该事件将附加到您单击的列表项上，而不是整个列表中。
删除第6行的if语句，因为我们在前面的线隐藏第二级别的所有ul S，我们并不需要检查，如果它是可见的;我们知道它不是。
更改线路6本：
```
$(this).children('ul').slideDown(); 
```
这是因为要展开ul是li你点击，而不是一个兄弟姐妹的孩子。

Here's my fixed jsFiddle。

编辑：如果您想从躲藏，当你点击一个已经扩大了一个重新展示其停止，只是这夹头在处理器的顶部：

if ($(this).children('ul').is(':visible')){ 
    return 
}

来源

2014-02-24 06:34:31

jquery - 点击下拉菜单

回答

相关问题