Chevron 图标根据手风琴位置向上或向下指向

Question

我有一个使用 jQuery UI 构建的手风琴。我需要向上或向下的 V 形图标，具体取决于该部分是打开还是关闭。问题是我的 jQuery。至少最初是这样。我看到两个人字形都在加载，一旦点击，人字形就不会改变。

jQuery

$(function() {

     $(".section a").click(function() {

          $(".chevron").removeClass("chevron").addClass("up");
    });
});

CSS

.chevron {
background: url("images/down.png") no-repeat;
}

.up {
background: url("images/up.png");
}

HTML

 <div class="section">
   <a href="#"><div class="tab active">
   <span class="chevron"></span><h3>Section 1</h3>
   </div></a> <!-- tab -->

Answer 1

您需要引用this，以便它切换您正在单击的元素（不是一次全部）。拥有$(this) 后，您可以使用.find 在链接中搜索人字形。

最后，您可以使用toggleClass 在类状态之间进行切换。这允许您重复单击链接并在类状态之间切换。

$(function() {
    //Add down to all .chevrons
    $(".section a .chevron").addClass('down'); 

    //Toggle up/down classes
    $(".section a").click(function() {
        var $chevron = $(this).find('.chevron');                
        $chevron.toggleClass("down up");
    });
});

然后对于 CSS，将类设置为正确的人字形图像：

.chevron.up { background-image('images/up.png'); }
.chevron.down { background-image('images/down.png'); }