Я не уверен, как объяснить это должным образом, но это должно функционировать как обычная кнопка «читать дальше», переключающая текст и изображение (значок).Однако по какой-то причине переключение класса не удаляет одно из изображений, в то время как оно работает для другого, поэтому одно из двух изображений всегда видно.
Это 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;
}
}
Оба класса имеют набор значковв качестве фонового изображения.«больше» имеет значок плюс и «меньше» значок минус.Значок «меньше» работает как надо.Для «больше» это не так.Значок плюса остается видимым, даже если класс «больше» был переключен на «меньше».Как сделать так, чтобы значки плюса и минуса отображались только при активном классе?