我有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

09-27 13:35
查看更多