Я просмотрел несколько тем на эту тему, но у меня возникли проблемы с изменением кода в соответствии с моим дизайном.
Я использую кнопки «Свернуть» отсюда: http://getbootstrap.com/javascript/#collapse
Они работают нормально, но я бы хотел, чтобы текст и значок менялись в зависимости от состояния элемента. .
Свернуто: показать больше V
Развернуто: показать меньше ^
Я написал это за 2 скрипты, потому что я довольно разбираюсь в JavaScript:
$(".collapse").click(function(){
$(this).hasClass("in")?true : (function(){
$(this).children("i").removeClass('fa-caret-down');
$(this).children("i").addClass('fa-caret-up');
}, function () {
$(this).children("i").removeClass('fa-caret-up');
$(this).children("i").addClass('fa-caret-down');
});
});
$(".collapse").click(function(){
$(this).hasClass("in")?true : (function(){
$(this).children("i").removeClass('More');
$(this).children("i").addClass('Less');
}, function () {
$(this).children("i").removeClass('Less');
$(this).children("i").addClass('More');
});
});
Имена элементов такие же, как свернутьBech, свернутьTrev и т. д.
Это что-то очевидное? отсутствует?
HTML
The cat sat on the mat
The cat sat on the mat
Read More
The cat sat on the mat
The cat sat on the mat
Read More
The cat sat on the mat
The cat sat on the mat
Read More
Подробнее здесь: https://stackoverflow.com/questions/346 ... t-is-colla
