Question

我有这段代码

<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，底部箭头是＆＃34; glyphicon glyphicon-triangle-bottom＆＃34; class。）

当涉及到JavaScript并且不知道如何向JavaScript添加css类时，我有点像菜鸟（并且还在学习）。

这可能吗？

谢谢

Answer 1

获取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/

Answer 2

this JSFiddle是否适合您？

我没有完全替换$ header内容（除去其他内容，包含里面的glyphicon），而只是更新了span。

// new
$header.find('.span').text(...)

Answer 3

使用jquery addClass（）和removeClass（）来获取它。


     if($content.is(":visible"))
                        {
                            $("span").removeClass("glyphicon glyphicon-arrow-down");
                            $("span").addClass("glyphicon glyphicon-arrow-right");


                        }
                        else{
                            $("span").removeClass("glyphicon glyphicon-arrow-right");
                            $("span").addClass("glyphicon glyphicon-arrow-down");

                        }

Answer 4

您需要替换text的{{1}}和class。您可以使用.removeClass和.addClass执行此操作。

由于span是唯一的子级，因此您可以使用.children访问它。 `

span

完整的代码位于下面的工作snnipe中。

＆＃13;

$span = $header.children();

$span.text(function () {
    //change text based on condition
    if($content.is(":visible")) { // replace with bottom
        $span.removeClass('glyphicon-triangle-right');
        $span.addClass('glyphicon-triangle-bottom');
        return  "Expand -";
    } else { // replace with right
        $span.removeClass('glyphicon-triangle-bottom');
        $span.addClass('glyphicon-triangle-right');
        return  "Expand +";
    }
});

＆＃13;

$(".header").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    $span = $header.children();
    //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
        
        $span.text(function () {
            //change text based on condition
            if($content.is(":visible")){
                $span.removeClass('glyphicon-triangle-right');
                $span.addClass('glyphicon-triangle-bottom');
                return  "Expand -";
            }else {          
                $span.removeClass('glyphicon-triangle-bottom');
                $span.addClass('glyphicon-triangle-right');
                return  "Expand +";
            }
        });
    });

});

＆＃13;

.container {
    width:100%;
    border:1px solid #d3d3d3;
}
.container div {
    width:100%;
}
.container .header {
    background-color:#d3d3d3;
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
}
.container .content {
    display: none;
    padding : 5px;
}

＆＃13;

Answer 5

你也可以像这样使用toggleClass

  $(".header").click(function () {
    $header = $(this);
    $content = $header.next();
    $content.slideToggle(500);
    $header.find('.glyphicon').toggleClass('glyphicon-triangle-right');
    $header.find('.glyphicon').toggleClass('glyphicon-triangle-bottom');
  });

链接在此处提供：http://jsfiddle.net/nmggoqrg/5/

JavaScript展开/折叠更改图像

5 个答案: