Добавление-удаление класса родителю
Помогите нубу плиз.
Есть разворачивающийся-сворачивающийся блок div.hideCont с текстом на jquery. Как добавить класс родительскому блоку div.ba_item_in при клике на а.hideBtn, а при клике на а.hideBtn.hide этот класс обратно удалить?
$(document).ready(function(){
$('a.hideBtn,a.hideBtn.hide').click(function(){
var Prnt=$(this).parents('.hideWrap:first');
Prnt.find('a.hideBtn').toggle();
Prnt.find('div.hideCont').slideToggle('normal');
return false;
});
});
<style type="text/css">
div.hideCont, a.hideBtn.hide { display:none; }
</style>
<div class="ba_item_in group">
<div class="ba_item_desc">
<p>текст текст текст</p>
<div class="hideWrap">
<a class="hideBtn" href="#">Подробнее</a>
<div class="hideCont">
<p>текст текст текст</p>
</div>
<a class="hideBtn hide" href="#">Свернуть</a>
</div>
</div>
</div>
|
<a class="hideBtn" href="#">Подробнее</a> и <a class="hideBtn hide" href="#">Свернуть</a> можно вообще-то заменить одной кнопкой со сменой режима Подробнее/Свернуть, или не пойдет?
|
Цитата:
|
Ну так выбрасывайте две кнопки и slideToggle() + toggleClass() по щелчку.
|
Цитата:
|
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<style type="text/css">
div.hideCont { display:none; }
</style>
<script>
$(function() {
$('span.modBtn').click(function() {
var b = $(this), m = b.data('swap');
m.unshift(m.pop());
b.next().slideToggle(600);
b.text(m[0]).data({swap: m});
}).data({swap: ["Подробнее", "Свернуть"]})
});
</script>
</head>
<body>
<div class="ba_item_in group">
<div class="ba_item_desc">
<p>текст текст текст</p>
<div class="hideWrap">
<span class="modBtn">Подробнее</span>
<div class="hideCont">
<p>текст текст текст</p>
</div>
</div>
</div>
</div>
</body>
</html>
|
Это не то. "Свернуть" получается над раскрытым блоком. А надо под ним.
И всё-таки главный вопрос - добавление-удаление класса блоку <div class="ba_item_in group">. |
А переставить местами эти элементы что нельзя? Или это тоже не понятно для нуба?
Меняйте местами а в коде b.next().slideToggle(600); заменить на b.prev().slideToggle(600); Для добавления/удаление класса добавить в код метод ранее указанный: $(div.ba_item_in).toggleClass('имя класса'); |
Цитата:
|
В обработчик естественно, можно после строки b.text(m[0]).data({swap: m});
|
| Часовой пояс GMT +3, время: 14:45. |