Задать вопрос
phpneguru
@phpneguru
javascript

Подменю 2го уровня как настроить открытие?

Есть такое меню аккардеон:
<ul class="product-categories"><li class="cat-item cat-item-194 cat-parent"><a href="https://www.terasveljet.com/tuote-osasto/esiliinat/">Esiliinat</a><ul class="children">
<li class="cat-item cat-item-195"><a href="https://www.terasveljet.com/tuote-osasto/esiliinat/lyhyet-nahkaliinat/">Lyhyet nahkaliinat</a></li>
<li class="cat-item cat-item-197"><a href="https://www.terasveljet.com/tuote-osasto/esiliinat/pitkat-nahkaliinat/">Pitkät nahkaliinat</a></li>
<li class="cat-item cat-item-196"><a href="https://www.terasveljet.com/tuote-osasto/esiliinat/esiliinat-yrityksille/">Yrityksille</a></li>
</ul>
</li>
<li class="cat-item cat-item-198 cat-parent current-cat-parent"><a href="https://www.terasveljet.com/tuote-osasto/huonekalut/">Huonekalut</a><ul class="children">
<li class="cat-item cat-item-232 current-cat"><a href="https://www.terasveljet.com/tuote-osasto/huonekalut/jokipoydat/">Jokipöydät</a></li>
<li class="cat-item cat-item-215"><a href="https://www.terasveljet.com/tuote-osasto/huonekalut/kellot/">Kellot</a></li>
<li class="cat-item cat-item-199"><a href="https://www.terasveljet.com/tuote-osasto/huonekalut/yolamput/">Yölamput</a></li>
</ul>
</li>
<li class="cat-item cat-item-217 cat-parent"><a href="https://www.terasveljet.com/tuote-osasto/keramiikka-astiat/">Keramiikka astiat</a><ul class="children">
<li class="cat-item cat-item-218"><a href="https://www.terasveljet.com/tuote-osasto/keramiikka-astiat/kahvikannut/">Kahvikannut</a></li>
<li class="cat-item cat-item-219"><a href="https://www.terasveljet.com/tuote-osasto/keramiikka-astiat/sakesarjat/">Sakesarjat</a></li>
<li class="cat-item cat-item-220"><a href="https://www.terasveljet.com/tuote-osasto/keramiikka-astiat/teekannut/">Teekannut</a></li>
<li class="cat-item cat-item-221"><a href="https://www.terasveljet.com/tuote-osasto/keramiikka-astiat/tuoksulamput/">Tuoksulamput</a></li>
</ul>
</li>
<li class="cat-item cat-item-200 cat-parent"><a href="https://www.terasveljet.com/tuote-osasto/korut/">Korut</a><ul class="children" style="display: none;">
<li class="cat-item cat-item-213"><a href="https://www.terasveljet.com/tuote-osasto/korut/kaulakorut/">Kaulakorut</a></li>
<li class="cat-item cat-item-212"><a href="https://www.terasveljet.com/tuote-osasto/korut/korvakorut/">Korvakorut</a></li>
<li class="cat-item cat-item-231"><a href="https://www.terasveljet.com/tuote-osasto/korut/paracord-korut/">Paracord korut</a></li>
<li class="cat-item cat-item-214"><a href="https://www.terasveljet.com/tuote-osasto/korut/rusetit/">Rusetit</a></li>
<li class="cat-item cat-item-203"><a href="https://www.terasveljet.com/tuote-osasto/korut/korusarjat/">Sarjat</a></li>
<li class="cat-item cat-item-201 cat-parent"><a href="https://www.terasveljet.com/tuote-osasto/korut/sormukset/">Sormukset</a>	<ul class="children none">
<li class="cat-item cat-item-208"><a href="https://www.terasveljet.com/tuote-osasto/korut/sormukset/sormus-kokoelma-luonto/">Kokoelma Luonto</a></li>
<li class="cat-item cat-item-207"><a href="https://www.terasveljet.com/tuote-osasto/korut/sormukset/sormus-kokoelma-maailma/">Kokoelma Maailma</a></li>
<li class="cat-item cat-item-209"><a href="https://www.terasveljet.com/tuote-osasto/korut/sormukset/sormus-kokoelma-meidan-meri/">Kokoelma Meidän meri</a></li>
<li class="cat-item cat-item-202"><a href="https://www.terasveljet.com/tuote-osasto/korut/sormukset/sormus-kokoelma-puusormukset/">Kokoelma puusormukset</a></li>
<li class="cat-item cat-item-210"><a href="https://www.terasveljet.com/tuote-osasto/korut/sormukset/sormus-kokoelma-rakkaudenkukatkukat/">Kokoelma Rakkaudenkukat</a></li>
	</ul>
</li>
</ul>
</li>
<li class="cat-item cat-item-228 cat-parent dispbminus"><a href="https://www.terasveljet.com/tuote-osasto/tulipesat/">Tulipesät</a><ul class="children" style="display: block;">
<li class="cat-item cat-item-230"><a href="https://www.terasveljet.com/tuote-osasto/tulipesat/delux/">Delux</a></li>
<li class="cat-item cat-item-229"><a href="https://www.terasveljet.com/tuote-osasto/tulipesat/premium/">Premium</a></li>
<li class="cat-item cat-item-235"><a href="https://www.terasveljet.com/tuote-osasto/tulipesat/tulikulhot/">Tulikulhot</a></li>
</ul>
</li>
<li class="cat-item cat-item-234"><a href="https://www.terasveljet.com/tuote-osasto/uutuudet/">Uutuudet</a></li>
<li class="cat-item cat-item-193 cat-parent"><a href="https://www.terasveljet.com/tuote-osasto/veitsikauppa/">Veitset</a><ul class="children">
<li class="cat-item cat-item-22"><a href="https://www.terasveljet.com/tuote-osasto/veitsikauppa/taotut-veitset/">Bulat</a></li>
<li class="cat-item cat-item-16"><a href="https://www.terasveljet.com/tuote-osasto/veitsikauppa/damascus-veitset/">Damascus</a></li>
<li class="cat-item cat-item-23"><a href="https://www.terasveljet.com/tuote-osasto/veitsikauppa/eksklusiiviset-veitset/">Eksklusiiviset veitset</a></li>
<li class="cat-item cat-item-21"><a href="https://www.terasveljet.com/tuote-osasto/veitsikauppa/isot-kokkiveitset/">Isot kokkiveitset</a></li>
<li class="cat-item cat-item-24"><a href="https://www.terasveljet.com/tuote-osasto/veitsikauppa/japanilaiset-veitset-tanto/">Japanilaiset veitset</a></li>
<li class="cat-item cat-item-18"><a href="https://www.terasveljet.com/tuote-osasto/veitsikauppa/kalastus-veitset/">Kalastusveitset</a></li>
<li class="cat-item cat-item-25"><a href="https://www.terasveljet.com/tuote-osasto/veitsikauppa/taotut-kirveet/">Kirveet</a></li>
<li class="cat-item cat-item-20"><a href="https://www.terasveljet.com/tuote-osasto/veitsikauppa/kokkiveitset/">Kokkiveitset</a></li>
<li class="cat-item cat-item-190"><a href="https://www.terasveljet.com/tuote-osasto/veitsikauppa/lisatuotteet/">Kotelot</a></li>
<li class="cat-item cat-item-26"><a href="https://www.terasveljet.com/tuote-osasto/veitsikauppa/viidakkoveitset/">Machetet</a></li>
<li class="cat-item cat-item-17"><a href="https://www.terasveljet.com/tuote-osasto/veitsikauppa/metsastysveitset/">Metsästysveitset</a></li>
<li class="cat-item cat-item-216"><a href="https://www.terasveljet.com/tuote-osasto/veitsikauppa/miekat/">Miekat</a></li>
<li class="cat-item cat-item-186"><a href="https://www.terasveljet.com/tuote-osasto/veitsikauppa/puukot/">Puukot</a></li>
<li class="cat-item cat-item-19"><a href="https://www.terasveljet.com/tuote-osasto/veitsikauppa/taktiset-veitset/">Taktiset veitset</a></li>
<li class="cat-item cat-item-233"><a href="https://www.terasveljet.com/tuote-osasto/veitsikauppa/veitset-uutuudet/">Veitset uutuudet</a></li>
<li class="cat-item cat-item-175"><a href="https://www.terasveljet.com/tuote-osasto/veitsikauppa/veitsi-uutuudet/">Veitsi uutuudet</a></li>
</ul>
</li>
<li class="cat-item cat-item-42"><a href="https://www.terasveljet.com/tuote-osasto/viimeksi-myydyt/">Viimeksi myydyt</a></li>
<li class="cat-item cat-item-15"><a href="https://www.terasveljet.com/tuote-osasto/kasintehdyt-veitset/">Yleinen</a></li>
</ul>


В котором есть подменю 2-го уровня с точно таким же классом .cat-parent. Т/е при нажатии на .cat-parent - происходит открытие .children. Но теперь есть одна категория с уровнем: .cat-parent .children .cat-parent (это категория 2го уровня). И когда нажимаю .cat-parent .children .cat-parent(а в меню это Korut(меню 1го уровня) и Sormukset(меню 2го уровня)) - то закрывается первое подменю.
Вот сам скрипт:
$(".cat-parent").on("click",function(){
 $(this).toggleClass('dispbminus');
  $(this).find('.children').not(".children .cat-parent .children").slideToggle("slow");
   $(this).find('.children .cat-parent .children').addClass("none");
});

Прочитал про .not() но он не работает вот так вот:
$(".cat-parent").not(".cat-parent .children .cat-parent").on("click",function(){
так тоже пробовал: $(".cat-parent").not( $(".cat-parent .children .cat-parent")).on("click",function(){
не работает.
  • Вопрос задан
  • 73 просмотра
Комментировать
Подписаться 1 Средний Комментировать
Решения вопроса 1
phpneguru
@phpneguru Автор вопроса 
$(".cat-parent").on("click",function(){
 $(this).toggleClass('dispbminus');
  $(this).find('.children').not(".children .cat-parent .children").slideToggle("slow");
});

$('.cat-parent .children .cat-parent').click(function() {
     $(this).find('.cat-parent').toggleClass('dispbminus');

    $(this).find('.children').slideToggle("slow");
    return $(this).closest('.children .cat-parent').hasClass('.cat-parent');
});

Нашел уже такое решение=)
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
iiiBird
@iiiBird
Пока ты спишь - твой конкурент совершенствуется 
$('.cat-parent').on("click",function(e){
	e.preventDefault();
	if ( $(this).parent('.product-categories').length > 0 ) {
  	console.log('тут действия Первого уровеня');
  } else {
  	console.log('тут действия Второго уровеня');
    e.stopPropagation();
  }
});
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend-разработчик JavaScript
div. • Ставрополь
от 40 000 до 90 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать приложение для Android и IOS
27 нояб. 2024, в 21:14
70000 руб./за проект
Разработка чат-бота JS + API интеграции
27 нояб. 2024, в 21:08
45000 руб./за проект
Нужно срочно отрисовать дизайн сайта
27 нояб. 2024, в 20:43
10000 руб./за проект
Ещё заказы