Question

我有一把手风琴我用jQuery UI构建。我需要指向上或下的V形图标，具体取决于该部分是打开还是关闭。问题是我的jQuery。至少最初它是。我看到两个V形臂都在加载，一旦点击，雪佛龙根本没有变化。

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在链接中搜索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，将类设置为正确的V形图像：

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

雪佛龙图标根据手风琴位置向上或向下指向

1 个答案: