0

我的代码： http ://codepen.io/vincentccw/pen/jquJs

<ul id="menuDots">
    <li id="about1"><a href="#"><img class="bulletRoll" src="images/menu-dot.png" /><img src="images/menu-dot-rollover.png" /></a></li>
    <li id="about2"><a href="#"><img class="bulletRoll" src="images/menu-dot.png" /><img src="images/menu-dot-rollover.png" /></a></li>
    <li id="about3"><a href="#"><img class="bulletRoll" src="images/menu-dot.png" /><img src="images/menu-dot-rollover.png" /></a></li>
</ul>

<div class="btn">next btn</div>

现在我已经设置了我的按钮

$('.btn').click(function(){
    $('#menuDots li a img.bulletRoll').css({"display":"none"});
});

问题是我有 3 组按钮，但层次不同，

第一个按钮 - $('#menuDots li a img.bulletRoll')，在 li 的第一个孩子内

第二个按钮 - $('#menuDots li a img.bulletRoll')，在 li 的第二个孩子内

第三个按钮 - $('#menuDots li a img.bulletRoll')，在 li 的第三个孩子内

如何display:none仅设置为第一个.bulletRoll，然后第二次单击将显示无设置为下一个.bulletRoll？我尝试使用next()但似乎不起作用？

4

1 回答 1

2

.bulletRoll您可以选择仍然可见的第一个元素：

$('.btn').click(function(){
    $('#menuDots li a img.bulletRoll').filter(':visible').first().css({"display":"none"});
});

演示：http ://codepen.io/anon/pen/nqJaI

您也可以使用.hide()而不是.css({"display":"none"}).

此外，我也不建议将 div 元素用作“按钮”，因为用户无法通过键盘访问它，因此无法（或只是选择不）使用鼠标的人无法访问您的页面或其他指点设备。请改用锚元素或按钮。

于 2013-08-04T11:02:09.043 回答