指向上或向下取决于手风琴位置的雪佛龙图标

我有使用jQuery UI构建的手风琴。根据部分是打开还是关闭，我需要指向上或下的人字形图标。问题是我的jQuery。至少最初是这样。我在加载时看到两个V形图标，一旦点击，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 -->

来源

2013-09-24 thomasp423

添加[的jsfiddle]（http://jsfiddle.net/）如果可能的话。 – Alvaro

我很困惑，但我放在jsfiddle中的代码有工作人字形。我猜的是来自jQuery UI。我如何在本地工作副本上没有他们？ http://jsfiddle.net/thomasp423/pcf5d/ – thomasp423

您需要引用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'); }

来源

2013-09-24 15:50:16 Axel

如果我想要上下类切换，该怎么办？但从头开始。现在它正在跨越跨度。 – thomasp423

这里是我正在寻找默认情况下加载http://i.imgur.com/PGtFu4Z.png – thomasp423

我已经更新了我的答案中的代码。你可以通过使用'$（“。section .chevron”）。addClass（'down'）;' – Axel

指向上或向下取决于手风琴位置的雪佛龙图标

回答

相关问题