我是 jquery 的新手,正在寻求帮助。目的是单击附加到 ul 的列表项并使其出现,同时任何其他列表项消失。只有事件的是可见的
我遇到的问题是,当我单击另一个列表项时,事件项会消失(按预期),但不会显示另一个,它仍然隐藏。我正在寻找一种方法来显示列表,同时隐藏不活动的列表。
我已经上传了我的问题:http://jsfiddle.net/CbU4d/
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
jquery 使用 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();
}
})
})
最佳答案
关于javascript - Jquery - 点击下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21980402/