Question

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

切换开关时我有一个文本，我想在它的末尾添加一个+（加号）符号。当切换打开时，我希望该符号变为 - （减号）。

我已尝试使用以下代码，但我无法找到添加加号/减号的方法，因为切换打开/关闭时没有css更改。

jQuery的：

dataState.loaded

HTML：

if (this.props.dataState && this.props.dataState.loaded){
         data = this.props.data.content ? this.props.data.content : [] ;
} else {
          this.renderLoading();
       }

CSS：

$(window).load(function(){
$(".header").click(function () {
    $header = $(this);
    $content = $header.next();
    $content.slideToggle(500, function () {
        $header.text(function () {
            return $content.is(":visible") ? "TITLE" : "TITLE";
        });
    });
});
});

Answer 1

使用伪元素，您可以通过切换类来控制内容。您也可以稍后将其轻松更改为图标或图像。

＆＃13;

$(window).load(function() {
  $(".header").click(function() {
    $header = $(this);
    $content = $header.next();
    $content.slideToggle(500, function() {
      $header.toggleClass('close');
    });
  });
});

＆＃13;

.header {
  background-color: #dc0032;
  padding: 20px;
  cursor: pointer;
  color: #fff;
}

.header:after {
  content:" -";
  font-size:20px;
}
.header.close:after {
  content:" +";
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header"><span>TITLE</span></div>
<div class="content">
  <p>Expanded text</p>
</div>

＆＃13;

jQuery slideToggle - 在标题后添加更改图标

1 个答案: