javascript - JavaScript展开/折叠更改图像

我有这段代码

http://jsfiddle.net/nmggoqrg/

<div class="container">
<div class="header"><span class="glyphicon glyphicon-triangle-right">Expand</span>

</div>
<div class="content">
    <ul>
        <li>This is just some random content.</li>
        <li>This is just some random content.</li>
        <li>This is just some random content.</li>
        <li>This is just some random content.</li>
    </ul>
</div>

    

  $(".header").click(function () {

$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
    //execute this after slideToggle is done
    //change text of header based on visibility of content div
    $header.text(function () {
        //change text based on condition
        return $content.is(":visible") ? "Expand -" : "Expand +";
    });
});

}）;

想要获得帮助，单击扩展时，页面div会扩展以显示信息。我希望标题标题从直角三角形变为底面三角形。 （使用的三角形是来自Bootstrap的glyphicons，底部箭头是“ glyphicon glyphicon-triangle-bottom”类。）

在谈到JavaScript时，我有些菜鸟（并且还在学习），并且不知道如何向JavaScript添加CSS类。

这可能吗？

谢谢

最佳答案

获取span，只需使用addClass / removeClass更改图标。

$header = $(this);
$span = $(this).find('span.glyphicon');

if($content.is(':visible')){
    $span.removeClass('glyphicon-triangle-right');
    $span.addClass('glyphicon-triangle-bottom');
    $span.text('Expand -');
} else {
   $span.removeClass('glyphicon-triangle-bottom');
   $span.addClass('glyphicon-triangle-right');
   $span.text('Expand +');
}

http://jsfiddle.net/daveSalomon/nmggoqrg/2/

进行一些重组，您可以使其响应速度更快。

  $(".header").click(function () {
    var $header = $(this);
    var $span = $header.find('span.glyphicon');
    var $content = $header.next('div.content');
    if($content.is(':visible')){
        $span.removeClass('glyphicon-triangle-bottom');
        $span.addClass('glyphicon-triangle-right');
    } else {
        $span.removeClass('glyphicon-triangle-right');
        $span.addClass('glyphicon-triangle-bottom');
    }
    $content.slideToggle(500);
});

http://jsfiddle.net/daveSalomon/nmggoqrg/4/

如果用户多次快速单击箭头，则需要做一些更聪明的操作来使箭头保持同步-也许您可以使用stop的组合并像以前一样使用回调。

http://jsfiddle.net/daveSalomon/nmggoqrg/6/