时间戳

首页 > 解决方案 > 即使切换课程，背景图像也会保留

jquery - 即使切换课程，背景图像也会保留

问题描述

我不确定如何正确解释这一点，但这应该作为一个常规的阅读更多按钮来切换文本和图像（图标）。但是，由于某种原因，切换类不会删除其中一个图像，而它适用于另一个图像，因此两个图像中的一个始终可见。

这是html

 <div class="read-more more">
   <button class="read-more_button">Read more</button>
 </div>

这是我用来切换 read more div 的类的 jQuery。它总是从“更多”类开始。

$(".read-more").click(function(){
  $(this).toggleClass("more less");
  $(".content-sidebar").toggleClass("longtext");

  if( $(this).hasClass("less") ) {
    $(".read-more_button").html("Hide");
  } else if( $(this).hasClass("more") ) {
    $(".read-more_button").html("Read more");
  }
});

编辑：这是用于添加图标的 css (sass)

.read-more {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100px;
  right: 0;
  border-radius: 0 0 5px 5px;
  margin: 0 15px;
  cursor: pointer;
  background: none;

  &.more {
    background: (gradient but removed for readability)

    button.read-more_button {
      background: url('assets/plus-more.png') 0 / 14px no-repeat transparent;
    } 
  }

  &.less {
    background: transparent;

    button.read-more_button {
      background: url('assets/minus-less.png') 0 / 14px no-repeat transparent;
    }
  }

  button.read-more_button {
    position: absolute;
    bottom: 15px;
    left: 30px;
    right: 30px;
    border: none;
    background: none;
    padding: 0 0 0 20px;
    color: $gray-dark;
    cursor: pointer;
    outline: none;
  }
}

这两个类都有一个图标集作为背景图像。“更多”有一个加号图标，“更少”有一个减号图标。“更少”的图标可以正常工作。对于“更多”，情况并非如此。即使将“更多”类切换为“更少”，加号图标仍然可见。我怎样才能使加号和减号图标仅在他们的课程处于活动状态时显示？

标签： jquerycsssass

解决方案

推荐阅读