Форум

katamason · #1 (**permalink**) 23.01.2016, 21:40

Добрый вечер, прошу помощи 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');
              } 
             
              
          })

рони · #2 (**permalink**) 23.01.2016, 22:04

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>

katamason · #3 (**permalink**) 24.01.2016, 09:25

рони,
Спасибо, все работает, но голову морочу над тем, как закрыть другие при клике и при этом не потерять состояние текущей вкладки, пробовал перед и после toggle что то подобное, но сделать примитивный аккордеон не получается из них

$(a).prev().not(e).next().toggleClass('show_with')
$(".item-with-ul ul").removeClass("show_with");

рони · #4 (**permalink**) 24.01.2016, 10:33

katamason,
и назовём это вариант открывашки 249

маловато, всё одно никто не увидит, надо сделать 300

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

panteradiab · #5 (**permalink**) 16.03.2016, 11:21

Таже ситуация. Пока что только разбираюсь в 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")
        })
    })
});

В первом случае всё работает, но открываются и закрываются все дивы на всех изображениях, но это и понятно, потому что я не указал условие.
Во втором случае не работает.
Подскажите как мне сделать, чтобы нормально отрабатывало открытие дива только того, на который происходил клик, а не на все

рони · #6 (**permalink**) 16.03.2016, 12:42

panteradiab,

$(function() {
    $(".test_inf").click(function() {
        $(this).next().toggleClass("info_show")
    })
});

ivan_zf_zp · #7 (**permalink**) 27.02.2017, 14:43

Добрый день, прошу прощения, могли бы Вы доработать этот вариант ещё одним уровнем вложенности, с аналогичной функциональностью и прокомментировать код jquery? Пятый день ломаю голову, совсем не могу разобраться в синтаксисе, чтоб полностью понять и разобраться для самостоятельного написания. Вроде бы и логики совсем чуток... вообщем ваще печаль. Заранее спасибо!

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

katamason,
и назовём это вариант открывашки 249

маловато, всё одно никто не увидит, надо сделать 300

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

рони · #8 (**permalink**) 27.02.2017, 14:48

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

вариант ещё одним уровнем вложенности

Выпадающее меню на jquery

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

прокомментировать код jquery

без коментариев

ivan_zf_zp · #9 (**permalink**) 27.02.2017, 18:09

МегаСпасибо!!!!!

Форум

Справочник

Discord чат

Курсы javascript