javascript - 如何使此代码适用于每次点击？

Question

我有 h3 block ，点击每个 block 我会显示与其关联的部分。它实际上有点像 Accordion (隐藏和折叠)。我还为 h3 标签提供了一个下拉图标，这意味着当 block 打开时，h3 应该有一个向下的下拉图标，而其他 h3 右边应该有 dropocons。我正在使用 backgroundPosition 控制此行为。我正在使用 jQuery 可见条件来查看特定 block 是否可见，然后为其放置图标提供一个背景位置，其余部分则为其他位置。它工作正常，但仅适用于第一次点击。第二次点击无效；有人可以解释为什么吗？这是我的代码:

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'});
    }
})

Answer 1

如果将整个 block 包装在一个 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>​

J查询:

var dropper = $('.drop-block'); 
$(dropper).find('h3').click(function(){ 
    $(this).toggleClass('active');
    $(dropper).find('ul').toggle();
});​

Example