我有h3
块,并单击每个块,然后显示与之相关的部分。实际上,它类似于手风琴(隐藏和折叠)。我还为h3
标记提供了一个放下图标,这意味着在打开块时,h3
应该具有一个指向下方的dropicon,而其他h3
应该具有向右的dropocon。我正在使用backgroundPosition
控制这种行为。我正在使用jQuery可见条件来查看特定块是否可见,然后将其放置图标提供一个背景位置,并将其放置到其他位置。它工作正常,但仅适用于首次点击。第二次单击不起作用,有人可以解释为什么,这是我的代码:
if($(this).next().is(':visible')) {
$(this).css({'backgroundPosition':'0px 14px'});
}
else {
$("h3").css({'backgroundPosition':'0px -11px'});
}
更新的代码:
$("h3").click(function() {
$(".tabs").hide();
$(this).next().show();
if($(this).next().is(':visible')) {
$(this).css({'backgroundPosition':'0px 14px'});
} else {
$("h3").css({'backgroundPosition':'0px -11px'});
}
})
最佳答案
如果将整个程序段包装在div中,则可能使遍历更加容易。
HTML:
<div class="drop-block">
<h3>Click this</h3>
<ul>
<li>Drop</li>
<li>it</li>
<li>like</li>
<li>it's</li>
<li>hot</li>
</ul>
</div>
jQuery:
var dropper = $('.drop-block');
$(dropper).find('h3').click(function(){
$(this).toggleClass('active');
$(dropper).find('ul').toggle();
});
Example