How to make it so that when you click on each brand it remains open with a drop-down list of categories inside. For example, clicked, and remains open, to let the user understand that there is a category as in the screenshot. Link to the project http://vca.kz/

enter image description here

$('.click-pr').click(function(){ $('.show-pr').slideToggle(); }); $('.click-pr2').click(function(){ $('.show-pr2').slideToggle(); }); $('.click-pr3').click(function(){ $('.show-pr3').slideToggle(); }); $('.click-pr4').click(function(){ $('.show-pr4').slideToggle(); }); $('.click-pr5').click(function(){ $('.show-pr5').slideToggle(); }); $('.click-pr6').click(function(){ $('.show-pr6').slideToggle(); });

HTML:

 <div class="goods-widget col-lg-3 col-md-3 col-sm-12 col-xs-12"> <h3>Продукция</h3> <div class="click-pr"> <a href="produkcziya/kartochka-tovara/ottogi">OTTOGI</a> </div> <div class="show-pr"> <a class="category-pr" href="produkcziya/kartochka-tovara/ottogi/ramen">Рамен</a> <a class="category-pr" href="produkcziya/kartochka-tovara/ottogi/suxari">Сухари</a> <a class="category-pr" href="produkcziya/kartochka-tovara/ottogi/klyar">Кляр</a> <a class="category-pr" href="produkcziya/kartochka-tovara/ottogi/kunzhutnoe-maslo">Кунжутное масло</a> </div> <div class="click-pr2"> <a href="produkcziya/kartochka-tovara/sajo-hapyo">Sajo Hapyo</a> </div> <div class="show-pr2"></div> <div class="click-pr3"> <a href="produkcziya/kartochka-tovara/natura-bogata">Natura Bogata</a> </div> <div class="show-pr3"></div> <div class="click-pr4"> <a href="produkcziya/kartochka-tovara/too-malu">ТОО Малу</a> </div> <div class="show-pr4"></div> <div class="click-pr5"> <a href="produkcziya/kartochka-tovara/dongsuh">Dongsuh</a> </div> <div class="show-pr5"> <a class="category-pr" href="produkcziya/kartochka-tovara/dongsuh/suxie-slivki">Сухие сливки</a> <a class="category-pr" href="produkcziya/kartochka-tovara/dongsuh/suxoe-moloko">Сухое молоко</a> </div> <div class="click-pr6"> <a href="produkcziya/kartochka-tovara/ooo-maj">ООО Май</a> </div> <div class="show-pr6"> <a class="category-pr" href="produkcziya/kartochka-tovara/ooo-maj/chaj">Чай</a> </div> </div>
  • one
    It's simple, write to cookies that the sidebar is open / closed and ready - ishidex2

1 answer 1

If I understand your question correctly, you need this:

 'use strict'; $('.dropdown-toggle a').click(function(event) { event.preventDefault(); $(event.target).parent('.dropdown-toggle').next('.dropdown-menu').slideToggle('fast'); }); 
 .hide { display: none; } .dropdown-menu a { display: block; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="goods-widget col-lg-3 col-md-3 col-sm-12 col-xs-12"> <h3>Продукция</h3> <div class="dropdown-toggle"> <a href="produkcziya/kartochka-tovara/ottogi">OTTOGI</a> </div> <div class="dropdown-menu hide"> <a class="category-pr" href="#">Рамен</a> <a class="category-pr" href="#">Сухари</a> <a class="category-pr" href="#">Кляр</a> <a class="category-pr" href="#">Кунжутное масло</a> </div> <div class="dropdown-toggle"> <a href="produkcziya/kartochka-tovara/sajo-hapyo">Sajo Hapyo</a> </div> <div class="dropdown-menu hide"> <a class="category-pr" href="#">Рамен</a> <a class="category-pr" href="#">Сухари</a> <a class="category-pr" href="#">Кляр</a> <a class="category-pr" href="#">Кунжутное масло</a> </div> <div class="dropdown-toggle"> <a href="produkcziya/kartochka-tovara/natura-bogata">Natura Bogata</a> </div> <div class="dropdown-menu hide"> <a class="category-pr" href="#">Рамен</a> <a class="category-pr" href="#">Сухари</a> <a class="category-pr" href="#">Кляр</a> <a class="category-pr" href="#">Кунжутное масло</a> </div> </div>

  • Switch (when clicking on which will open the list below), set the class dropdown-toggle .
  • List (which will appear / disappear), set the class dropdown-menu and hide .

You have not optimally written HTML in this block, I took the code from your example, but it is better (if possible) to rewrite HTML. I can write an example of correct HTML + JS.