Question

我想在每次激活slideToggle时更改部分文字。

例如，我有一个文本，当点击时会显示一些信息。然后，文本旁边显示的角度应从向下角度变为向上角度。

我已经尝试使用以下代码，但只有在再次激活slideToggle时才会保持向下角度。

JQuery的：

$(".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
        $('.fa-angle-down').remove();
        $header.prepend('<i class="fa fa-angle-up"></i>');
    });

});

HTML：

<div class='container'>
<h2>Title</h2>
<br>
<div class='header'><i class="fa fa-angle-down fa-1x"></i> Title text</div>
<div class="content">
Content text
</div>
</div>

CSS：

.container .content {
    display: none;
    padding : 5px;
}

.header {
    cursor: pointer;
}

Answer 1

您需要在幻灯片完整回调中切换类

$header.find('i').toggleClass('fa-angle-down fa-angle-up');

Answer 2

我认为jQuery toggleClass()可能更适合您的要求：

$(".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 () { 
        $('.fa').toggleClass("angle-down");
    });

});

试试这个example。

JQuery slideToggle - 更改文本

2 个答案: