我使用这个html结构:
<div id="products">
<ul>
<li class="selected"><a href="#">Item 1</a>
<ul>
<li><a href="#">Sub-Item 1 a</a></li>
<li><a href="#">Sub-Item 1 b</a></li>
<li><a href="#">Sub-Item 1 c</a></li>
</ul>
</li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="#">Sub-Item 2 a</a></li>
<li><a href="#">Sub-Item 2 b</a></li>
</ul>
</li>
<li><a href="#">Item 3</a>
<ul>
<li><a href="#">Sub-Item 3 a</a></li>
<li><a href="#">Sub-Item 3 b</a></li>
<li><a href="#">Sub-Item 3 c</a></li>
<li><a href="#">Sub-Item 3 d</a></li>
</ul>
</li>
<li><a href="#">Item 4</a>
<ul>
<li><a href="#">Sub-Item 4 a</a></li>
<li><a href="#">Sub-Item 4 b</a></li>
<li><a href="#">Sub-Item 4 c</a></li>
</ul>
</li>
</ul>
</div>
和这个jquery代码:
$(document).ready(function () {
$("#products li").click(function() {
if ($(this).attr('class') != 'selected') {
$('#products li').removeClass('selected');
$(this).addClass('selected');
}
});
$("#products li").click(function() {
$('#products li ul').slideUp();
$('#products li.selected ul').slideDown();
});
});
问题:
我只想对第一级的项目进行上下滑动效果(&lt; li&gt;) 不在子项目上
另一个问题 - 如果列表项已经是class =“selected”并且您点击它,它会向上滑动然后再向下滑动..(如果已经存在则不会发生任何事情)
有人可以使用jquery代码吗?
答案 0 :(得分:1)
试试这个:
演示: http://jsfiddle.net/LEdgT/6/
$(document).ready(function () {
$("#products > ul > li").click(function() {
if ($(this).has('ul')) {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected')
.find('ul').slideUp();
}
else {
$(this).addClass('selected')
.find('ul').slideDown();
}
}
});
});
答案 1 :(得分:0)
将您的选择器更改为$('#products > ul > li')
,它只会选择直接的孩子。
或者您可以将整个代码更改为更具可读性和更少重复性的代码:
var $topLevelItems = $("#products > ul > li");
$topLevelItems.click(function() {
if (!$(this).hasClass('selected')) {
$topLevelItems.removeClass('selected')
.find('ul')
.slideUp();
$(this).addClass('selected')
.find('ul')
.slideDown();
}
});
答案 2 :(得分:0)
您可以使用:not
选择器或.not
$('#products > li:not(.selected)').click(function() {
$('#products li ul').slideUp();
$('#products li.selected ul').slideDown();
});