我有一个简单的菜单,如下所示:
<ul id="navigation">
<li id="m_li">
<div><span>+</span><a href="#" >myself</a></div>
<ul class="test" id="x_ul">
<li id="li">
<a href="#" >Pictures</a>
</li>
<li id="li">
<a href="#" >Audio</a>
</li>
</ul>
</li>
<li id="profile_modeling_li">
<div><span>+</span><a href="#" >friend</a></div>
<ul class="test" id="y_ul">
<li id="li">
<a href="#" >Pictures</a>
</li>
<li id="li">
<a href="#" >Video</a>
</li>
</ul>
</li>
</ul>
然后我使用jquery所以当我点击+
符号时,ul滑下来:
$("#navigation > li > div > span").click(function(){
if(false == $(this).next('ul').is(':visible')) {
$('#accordion ul').slideUp(300);
}
$(this).next('ul').slideToggle(300);
});
问题是$(this).next('ul')
似乎不喜欢下一个ul
任何想法我做错了什么?
答案 0 :(得分:10)
使用
$(this).parent().next()
而不是
$(this).next();
当然,您可以传递一个选择器(更简单或更复杂),将选定的元素标识为参数:
$(this).parent().next('ul.test[id$="_ul]"');
答案 1 :(得分:3)
.next / .prev
遍历兄弟姐妹,而ul不是跨越的孩子。您应该找到距离最近的li
并找到.test
。
$(this).closest('li').find('ul.test')
答案 2 :(得分:1)