toggle class в меню
Добрый вечер, прошу помощи c обычным переключателем по классам в такой html структуре, но не получается сменять класс (закрыть выпадение) при клике на уже развернутый пункт меню
<div class="topmenu"> <ul > <li class=""> <a href="#" class="">Itemmenu empty</a> </li> <li class="item-with-ul"> <a href="#" class="touch-with">Itemmenu</a> <ul > <li><a href="#">Subitem1</a></li> <li><a href="#">Subitem1</a></li> <li><a href="#">Subitem2</a></li> </ul> </li> <li class="item-with-ul"> <a href="#" class="touch-with">Itemmenu</a> <ul class="item-with-ul"> <li><a href="#">Subitem1</a></li> <li><a href="#">Subitem1</a></li> <li><a href="#">Subitem2</a></li> </ul> </li> <li class=""> <a href="#" class="">Itemmenu</a> </li> </ul> </div> $('.touch-with').unbind('click').bind('click',function(e) {
e.preventDefault();
$('.item-with-ul').find('ul').removeClass('show_with');
if($(this).next().hasClass('show_with')) {
$(this).next().removeClass('show_with');
}
if($(this).next().not('[show_with]')) {
$(this).next().toggleClass('show_with');
}
})
|
katamason,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.item-with-ul ul{display:none}
.item-with-ul ul.show_with{display:block}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
$(".item-with-ul ul").each(function(b, a) {
$(a).prev().click(function() {
$(a).toggleClass("show_with")
})
})
});
</script>
</head>
<body> <div class="topmenu">
<ul >
<li class="">
<a href="#" class="">Itemmenu empty</a>
</li>
<li class="item-with-ul">
<a href="#" class="touch-with">Itemmenu</a>
<ul >
<li><a href="#">Subitem1</a></li>
<li><a href="#">Subitem1</a></li>
<li><a href="#">Subitem2</a></li>
</ul>
</li>
<li class="item-with-ul">
<a href="#" class="touch-with">Itemmenu</a>
<ul class="item-with-ul">
<li><a href="#">Subitem1</a></li>
<li><a href="#">Subitem1</a></li>
<li><a href="#">Subitem2</a></li>
</ul>
</li>
<li class="">
<a href="#" class="">Itemmenu</a>
</li>
</ul>
</div>
</body>
</html>
|
рони,
Спасибо, все работает, но голову морочу над тем, как закрыть другие при клике и при этом не потерять состояние текущей вкладки, пробовал перед и после toggle что то подобное, но сделать примитивный аккордеон не получается из них $(a).prev().not(e).next().toggleClass('show_with')
$(".item-with-ul ul").removeClass("show_with");
|
Открывашка 249
katamason,
и назовём это вариант открывашки 249 :cray: :cray: :cray: маловато, всё одно никто не увидит, надо сделать 300 :lol: <!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.item-with-ul ul{display:none}
.item-with-ul ul.show_with{display:block}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var c = $(".item-with-ul ul")
c.each(function(b, a) {
$(a).prev().click(function() {
c.not($(a).toggleClass("show_with")).removeClass("show_with")
})
})
});
</script>
</head>
<body> <div class="topmenu">
<ul >
<li class="">
<a href="#" class="">Itemmenu empty</a>
</li>
<li class="item-with-ul">
<a href="#" class="touch-with">Itemmenu</a>
<ul >
<li><a href="#">Subitem1</a></li>
<li><a href="#">Subitem1</a></li>
<li><a href="#">Subitem2</a></li>
</ul>
</li>
<li class="item-with-ul">
<a href="#" class="touch-with">Itemmenu</a>
<ul class="item-with-ul">
<li><a href="#">Subitem1</a></li>
<li><a href="#">Subitem1</a></li>
<li><a href="#">Subitem2</a></li>
</ul>
</li>
<li class="">
<a href="#" class="">Itemmenu</a>
</li>
</ul>
</div>
</body>
</html>
|
Таже ситуация. Пока что только разбираюсь в js.
Кто знает подскажите пожалуйста. Есть код HTML <div class="razdelitel"> <a rel="gallery" href ="../images/Colection/Ambiance/big/Erismann_Ambiance_big_5906_01.jpg" class="photo"><img src="../images/Colection/Ambiance/small/Erismann_Ambiance_5906-01.jpg" alt="" width="275" height="175" /></a> <div class="test_inf"> <div class="info">Краткая информация</div> <div class="seriya">5906-01</div> </div> <div class="info_text"> <h2>Подробная информация о продукте</h2> <div class="kolonki"> <div class="left_kol">Фабр. №:</div> <div class="right_kol">5906-01</div> </div> <div class="kolonki"> <div class="left_kol">Виды продукта:</div> <div class="right_kol">обои</div> </div> <div class="kolonki"> <div class="left_kol">Тип обоев:</div> <div class="right_kol">Структурные обои на флизелиновой основе</div> </div> <div class="kolonki"> <div class="left_kol">Размеры рулона:</div> <div class="right_kol">10.05 x 0.53</div> </div> <div class="kolonki"> <div class="left_kol">Раппорт:</div> <div class="right_kol">64 см прямой стык</div> </div> <div class="kolonki"> <div class="left_kol">Цвета:</div> <div class="right_kol">белый, серый</div> </div> <div class="kolonki"> <div class="left_kol">Вид рисунка:</div> <div class="right_kol">Образец/Мотив</div> </div> <div class="kolonki"> <div class="left_kol">Тип рисунка:</div> <div class="right_kol">Расписано цветами</div> </div> <div class="kolonki"> <div class="left_kol">Мир жилья:</div> <div class="right_kol">Спальня, жилая комната</div> </div> <div class="kolonki"> <div class="left_kol">Стиль жилья:</div> <div class="right_kol">модерн</div> </div> <div class="kolonki"> <div class="left_kol">Свойства обоев:</div> <div class="right_kol"><p>нанести клей на стену<br>при ремонте снимаются на сухо<br>трудновоспламеняемые<br>сверхмоющиеся<br>сверхсветостойкие</p></div> </div> </div> </div> <div class="razdelitel"> <a rel="gallery" href ="../images/Colection/Ambiance/big/Erismann_Ambiance_big_5906-03.jpg" class="photo"><img src="../images/Colection/Ambiance/small/Erismann_Ambiance_5906-03.jpg" alt="" width="275" height="175" /></a> <div class="test_inf"> <div class="info">Краткая информация</div> <div class="seriya">5906-03</div> </div> <div class="info_text"> <h2>Подробная информация о продукте</h2> <div class="kolonki"> <div class="left_kol">Фабр. №:</div> <div class="right_kol">5906-03</div> </div> <div class="kolonki"> <div class="left_kol">Виды продукта:</div> <div class="right_kol">обои</div> </div> <div class="kolonki"> <div class="left_kol">Тип обоев:</div> <div class="right_kol">Структурные обои на флизелиновой основе</div> </div> <div class="kolonki"> <div class="left_kol">Размеры рулона:</div> <div class="right_kol">10.05 x 0.53</div> </div> <div class="kolonki"> <div class="left_kol">Раппорт:</div> <div class="right_kol">64 см прямой стык</div> </div> <div class="kolonki"> <div class="left_kol">Цвета:</div> <div class="right_kol">жёлтый</div> </div> <div class="kolonki"> <div class="left_kol">Вид рисунка:</div> <div class="right_kol">Образец/Мотив</div> </div> <div class="kolonki"> <div class="left_kol">Тип рисунка:</div> <div class="right_kol">Расписано цветами</div> </div> <div class="kolonki"> <div class="left_kol">Мир жилья:</div> <div class="right_kol">Спальня, жилая комната</div> </div> <div class="kolonki"> <div class="left_kol">Стиль жилья:</div> <div class="right_kol">модерн</div> </div> <div class="kolonki"> <div class="left_kol">Свойства обоев:</div> <div class="right_kol"><p>нанести клей на стену<br>при ремонте снимаются на сухо<br>трудновоспламеняемые<br>сверхмоющиеся<br>сверхсветостойкие</p></div> </div> </div> </div> Хочу сделать чтобы по клику на класс .test_inf показывался div с классом .info_text, но показывался только один. В примере приведено только 2 изображения, а их больше 300. Писал два скрипта: 1. $(document).ready(function(){
$('.test_inf').click(function(){
$('.info_text').toggleClass('info_show');
});
});
2. $(function() {
var е = $(".test_inf .info_text")
е.each(function(b, a) {
$('.info_inf').prev().click(function() {
е.not($('.info_inf').toggleClass("info_show")).removeClass("info_show")
})
})
});
В первом случае всё работает, но открываются и закрываются все дивы на всех изображениях, но это и понятно, потому что я не указал условие. Во втором случае не работает. Подскажите как мне сделать, чтобы нормально отрабатывало открытие дива только того, на который происходил клик, а не на все |
panteradiab,
$(function() {
$(".test_inf").click(function() {
$(this).next().toggleClass("info_show")
})
});
|
Ешё один уровень вложенности
Добрый день, прошу прощения, могли бы Вы доработать этот вариант ещё одним уровнем вложенности, с аналогичной функциональностью и прокомментировать код jquery? Пятый день ломаю голову, совсем не могу разобраться в синтаксисе, чтоб полностью понять и разобраться для самостоятельного написания. Вроде бы и логики совсем чуток... вообщем ваще печаль. Заранее спасибо!
Цитата:
|
Цитата:
Цитата:
|
МегаСпасибо!!!!!
|
| Часовой пояс GMT +3, время: 18:40. |