Javascript 根据手风琴位置指向上或下的V形图标

我有一个使用jQueryUI构建的手风琴。我需要的V形图标，指向上或下，这取决于该部分是打开还是关闭。问题是我的jQuery。至少一开始是这样。我看到两个雪佛龙都在加载，一旦点击，雪佛龙根本不会改变

Jquery

$(function() {

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

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

CSS

HTML

您需要引用，以便它切换您正在单击的元素（不是一次全部）。一旦有了

$（this）

，就可以使用在链接中搜索V形

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

$(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，将类设置为正确的V形图像：

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

---

如果可能的话，添加一个。我很困惑，但是我放在JSFIDLE中的代码有工作的V形。我猜是来自jQueryUI。为什么我本地的工作副本上没有它们？如果我想有一个上下类切换呢。但是从它开始。现在，它把代码放在了范围之外。我已经在我的答案中更新了代码。您可以使用

$（“.section a.chevron”）.addClass（'down'）将
.down
添加到页面加载上的所有文件中
$(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");
    });
});

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