Форум

Lutsk · #1 (**permalink**) 12.03.2015, 11:58

Помогите нубу плиз.
Есть разворачивающийся-сворачивающийся блок 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>

laimas · #2 (**permalink**) 12.03.2015, 12:11

<a class="hideBtn" href="#">Подробнее</a> и <a class="hideBtn hide" href="#">Свернуть</a> можно вообще-то заменить одной кнопкой со сменой режима Подробнее/Свернуть, или не пойдет?

Lutsk · #3 (**permalink**) 12.03.2015, 12:15

Сообщение от laimas

<a class="hideBtn" href="#">Подробнее</a> и <a class="hideBtn hide" href="#">Свернуть</a> можно вообще-то заменить одной кнопкой со сменой режима Подробнее/Свернуть, или не пойдет?

Конечно подойдет. Это же на скорость не повлияет

laimas · #4 (**permalink**) 12.03.2015, 12:23

Ну так выбрасывайте две кнопки и slideToggle() + toggleClass() по щелчку.

Lutsk · #5 (**permalink**) 12.03.2015, 12:28

Сообщение от laimas

Ну так выбрасывайте две кнопки и slideToggle() + toggleClass() по щелчку.

Я ж говорю, - нуб. Поэтому и прошу помощи с кодом.

laimas · #6 (**permalink**) 12.03.2015, 12:45

<!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>

Lutsk · #7 (**permalink**) 12.03.2015, 12:54

Это не то. "Свернуть" получается над раскрытым блоком. А надо под ним.
И всё-таки главный вопрос - добавление-удаление класса блоку <div class="ba_item_in group">.

laimas · #8 (**permalink**) 12.03.2015, 13:01

А переставить местами эти элементы что нельзя? Или это тоже не понятно для нуба?

Меняйте местами а в коде

b.next().slideToggle(600);

заменить на

b.prev().slideToggle(600);

Для добавления/удаление класса добавить в код метод ранее указанный:

$(div.ba_item_in).toggleClass('имя класса');

Lutsk · #9 (**permalink**) 12.03.2015, 13:14

Сообщение от laimas

Для добавления/удаление класса добавить в код метод ранее указанный:

$(div.ba_item_in).toggleClass('имя класса');

Прошу прощения. Куда именно добавить этот код?

laimas · #10 (**permalink**) 12.03.2015, 13:19

В обработчик естественно, можно после строки b.text(m[0]).data({swap: m});

Форум

Справочник

Discord чат

Курсы javascript