0

我有一个使用 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 -->
4

1 回答 1

2

您需要引用,以便它切换您正在单击的元素(不是一次全部)。拥有.find 后$(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'); }
于 2013-09-24T15:50:16.183 回答