Повторный вызов функции
Добрый день! Могли бы подсказать где была допущена ошибка. В скрипте требуется добить классы определённым объектам если их нету, а если они уже есть то удалить их.
Сам скрипт по добавлению класса работает отлично но не работает на удаление.
function moreItem(butt) {
parent1 = $(butt).parent();
parent2 = parent1.parent();
childer = parent1.children();
childer2 = childer.find('.desc-it');
if(parent2 == '.items.acti' & childer2 == '.desc-it.acti') {
parent2.removeClass('acti');
$(childer2).removeClass('acti').animate({height: '0px', opacity: 0}, 1000);
}
else if (parent2 != '.items.acti' & childer2 != '.desc-it.acti') {
parent2.addClass('acti');
$(childer2).addClass('acti').animate({height: '300px', opacity: 1}, 1000);
}
};
Функция вызывается по клику
<div class="items panel panel-default col-md-3">
<div class="panel-heading row">title</div>
<div class="panel-body row">
<form >
<div class="desc-it">content</div>
</form>
<a class="mr" onclick="moreItem(this);">Все характеристики <br> <i class="fa fa-angle-double-down"></i></a>
</div>
</div>
|
villiwalla,
А может, вам подумать над использованием .toggleClass() ? http://jquery.page2page.ru/index.php...%D1%81%D0% B0 |
Цитата:
|
Цитата:
|
Открывашка 255 спойлер открытие на высоту содержимого
villiwalla,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.desc-it {
height: 0; opacity: 0;
}
.items.acti .panel-heading{
color: #FF0000;
}
.desc-it.acti{
border: 2px solid #FF00FF;
}
.mr{
cursor: pointer;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function() {
$(".items").each(function(indx, item) {
$(".mr", item).on("click", function(event) {
event.preventDefault();
var op = $(item).toggleClass("acti").is(".acti"),
content = $(".desc-it", item);
op = op ? {
height: content[0].scrollHeight,
opacity: 1
} : {
height: 0,
opacity: 0
};
content.stop().toggleClass("acti").animate(op, 1000)
})
})
});
</script>
</head>
<body>
<div class="items panel panel-default col-md-3">
<div class="panel-heading row">title</div>
<div class="panel-body row">
<form >
<div class="desc-it">content</div>
</form>
<a class="mr" >Все характеристики <br> <i class="fa fa-angle-double-down"></i></a>
</div>
</div>
<div class="items panel panel-default col-md-3">
<div class="panel-heading row">title</div>
<div class="panel-body row">
<form >
<div class="desc-it">content<br><br><br><br><br>content</div>
</form>
<a class="mr" >Все характеристики <br> <i class="fa fa-angle-double-down"></i></a>
</div>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 23:49. |