Фоновое изображение остается даже при переключении класса - PullRequest
0 голосов
/ 25 апреля 2018

Я не уверен, как объяснить это должным образом, но это должно функционировать как обычная кнопка «читать дальше», переключающая текст и изображение (значок).Однако по какой-то причине переключение класса не удаляет одно из изображений, в то время как оно работает для другого, поэтому одно из двух изображений всегда видно.

Это HTML

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

И это jQuery, который я использовал для переключения класса div read more.Он всегда начинается с класса «more».

$(".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");
  }
});

EDIT: И это 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;
  }
}

Оба класса имеют набор значковв качестве фонового изображения.«больше» имеет значок плюс и «меньше» значок минус.Значок «меньше» работает как надо.Для «больше» это не так.Значок плюса остается видимым, даже если класс «больше» был переключен на «меньше».Как сделать так, чтобы значки плюса и минуса отображались только при активном классе?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...