D
D
Daulet2021-01-10 02:05:20
JavaScript
Daulet, 2021-01-10 02:05:20

2nd level submenu how to set the opening?

There is such an accordion menu:

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


Which has a 2nd level submenu with exactly the same .cat-parent class. That is, when you click on .cat-parent, .children is opened. But now there is one category with a level: .cat-parent .children .cat-parent (this is the 2nd level category). And when I press .cat-parent .children .cat-parent (and in the menu it is Korut (1st level menu) and Sormukset (2nd level menu)) - then the first submenu closes.
Here is the script itself:
$(".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");
});

I read about .not() but it doesn't work like this:
$(".cat-parent").not(".cat-parent .children .cat-parent").on("click",function(){
tried this too: $(".cat-parent").not( $(".cat-parent .children .cat-parent")).on("click",function(){
doesn't work.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
D
Daulet, 2021-01-10
@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');
});

Found this solution already =)

I
iBird Rose, 2021-01-10
@iiiBird

$('.cat-parent').on("click",function(e){
  e.preventDefault();
  if ( $(this).parent('.product-categories').length > 0 ) {
  	console.log('тут действия Первого уровеня');
  } else {
  	console.log('тут действия Второго уровеня');
    e.stopPropagation();
  }
});

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question