Question

我创建了一个隐藏的div，直到用户点击＆＃34;展开＆＃34;导致div扩大显示内容。当div扩展时，单词＆＃34;展开＆＃34;更改为＆＃34;合同＆＃34;并在点击时再次收缩div。

当div扩展时，我也喜欢可点击文字的颜色从黑色变为红色，但我不知道如何做到这一点。

我使用的代码如下

身体：

<div class="container">
<div class="header"><span>Expand</span></div>
<div class="content">Here's the contents to be hidden under the expand button</div>
</div>

样式表中的

.container {
    width:100%;
}
.container div {
    width:100%;
margin-bottom: 10px;
}

.container .header {
    color: #000000;
    cursor: pointer;
}

.container .header-expanded {
    color: red;
    cursor: pointer;
}

.container .content {
    display: none;
    background-color: #FFFFFF;
    color: #333333;
}

这里是Javascript

 $(".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") ? "Collapse" : "Expand";


        });
    });
});

有人可以告诉我如何让＆＃34;崩溃＆＃34;当div扩展时，文本显示为红色？对不起，如果这很明显，我对此非常陌生。

感谢。

Answer 1

您可以使用.toggleClass(className, state)

一个布尔值，用于确定是应该添加还是删除该类。

声明一个CSS类，

.redColor {color : red}

代码的

$header.toggleClass('redColor', $content.is(":visible"))

改变＆＃34;展开＆＃34;使用Javascript扩展div时按钮文本颜色

1 个答案: