javascript - 人字形图标向上或向下指向，取决于 Accordion 的位置

我有一个使用jQuery UI构建的手风琴。我需要向上或向下的人字形图标，具体取决于该部分是打开还是关闭。问题是我的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 -->

最佳答案

您需要引用this，以便它切换您单击的元素（并非一次全部）。一旦有了$(this)，就可以使用.find在链接中搜索V形。

最后，您可以使用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'); }

关于javascript - 人字形图标向上或向下指向，取决于 Accordion 的位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18986300/