$('#menu li.has-sub > a').on('click', function() { $(this).removeAttr('href'); var element = $(this).parent('li'); if (element.hasClass('open')) { element.removeClass('open'); element.find('li').removeClass('open'); element.find('ul').slideUp(); } else { element.addClass('open'); element.children('ul').slideDown(); element.siblings('li').children('ul').slideUp(); element.siblings('li').removeClass('open'); element.siblings('li').find('li').removeClass('open'); element.siblings('li').find('ul').slideUp(); } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id='menu'> <ul> <li class='has-sub'><a href='#'>ΠšΠΎΠ»Π»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ Π»Π°ΠΌΠΏ</a> <ul> <li> <a href='#'> <label for="label_1"> <input type="checkbox" name="animalc" id="label_1" value="1" /> <span>1</span> </label> </a> </li> <li> <a href='#'> <label for="label_2"> <input type="checkbox" name="animalc" id="label_2" value="2" /> <span>2</span> </label> </a> </li> <li> <a href='#'> <label for="label_3"> <input type="checkbox" name="animalc" id="label_3" value="3" /> <span>2</span> </label> </a> </li> </ul> </li> <li class='has-sub'><a href='#'>Π’ΠΈΠΏ Π»Π°ΠΌΠΏΠΎΡ‡Π΅ΠΊ</a> <ul> <li> <a href='#'> <label for="label_4"> <input type="checkbox" name="animalc" id="label_4" value="4" /> <span>1</span> </label> </a> </li> <li> <a href='#'> <label for="label_5"> <input type="checkbox" name="animalc" id="label_5" value="5" /> <span>2</span> </label> </a> </li> <li> <a href='#'> <label for="label_6"> <input type="checkbox" name="animalc" id="label_6" value="6" /> <span>3</span> </label> </a> </li> </ul> </li> <li class='has-sub'><a href='#'>ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅</a> <ul> <li> <a href='#'> <label for="label_7"> <input type="checkbox" name="animalc" id="label_7" value="7" /> <span>1</span> </label> </a> </li> <li> <a href='#'> <label for="label_8"> <input type="checkbox" name="animalc" id="label_8" value="8" /> <span>2</span> </label> </a> </li> <li> <a href='#'> <label for="label_9"> <input type="checkbox" name="animalc" id="label_9" value="9" /> <span>3</span> </label> </a> </li> </ul> </li> <li class='has-sub'><a href='#'>Π‘Ρ‚ΠΈΠ»ΡŒ</a> <ul> <li> <a href='#'> <label for="label_10"> <input type="checkbox" name="animalc" id="label_10" value="10" /> <span>1</span> </label> </a> </li> <li> <a href='#'> <label for="label_11"> <input type="checkbox" name="animalc" id="label_11" value="11" /> <span>2</span> </label> </a> </li> <li> <a href='#'> <label for="label_12"> <input type="checkbox" name="animalc" id="label_12" value="12" /> <span>3</span> </label> </a> </li> </ul> </li> <li class='has-sub'><a href='#'>Π‘Ρ€Π΅Π½Π΄</a> <ul> <li> <a href='#'> <label for="label_13"> <input type="checkbox" name="animalc" id="label_13" value="13" /> <span>1</span> </label> </a> </li> <li> <a href='#'> <label for="label_14"> <input type="checkbox" name="animalc" id="label_14" value="14" /> <span>2</span> </label> </a> </li> <li> <a href='#'> <label for="label_15"> <input type="checkbox" name="animalc" id="label_15" value="15" /> <span>2</span> </label> </a> </li> </ul> </li> </ul> </div>

when you click on a menu item, the sub-item opens from the checkbox, when you click on the second (the first closes), etc. How to change the code so that you can open several sub-items of the menu in a row, and then close them accordingly?

  • don't slide up for neighbors and they won't close - Grundy
  • it is possible in more detail, for I have already tried it at will and nothing comes out - sagan

1 answer 1

In the else branch in rows

 element.siblings('li').children('ul').slideUp(); ... element.siblings('li').find('ul').slideUp();

By the way, almost the same thing is done and you can leave only the last line.

ul selected that are adjacent to the current li . If you comment out this line, they will not close.

In principle, the whole method can be replaced by the following

 $('#menu li.has-sub > a').on('click', function() { $(this).removeAttr('href'); var element = $(this).parent('li') .toggleClass('open') .children('ul') .slideToggle(); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id='menu'> <ul> <li class='has-sub'><a href='#'>ΠšΠΎΠ»Π»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ Π»Π°ΠΌΠΏ</a> <ul> <li> <a href='#'> <label for="label_1"> <input type="checkbox" name="animalc" id="label_1" value="1" /> <span>1</span> </label> </a> </li> <li> <a href='#'> <label for="label_2"> <input type="checkbox" name="animalc" id="label_2" value="2" /> <span>2</span> </label> </a> </li> <li> <a href='#'> <label for="label_3"> <input type="checkbox" name="animalc" id="label_3" value="3" /> <span>2</span> </label> </a> </li> </ul> </li> <li class='has-sub'><a href='#'>Π’ΠΈΠΏ Π»Π°ΠΌΠΏΠΎΡ‡Π΅ΠΊ</a> <ul> <li> <a href='#'> <label for="label_4"> <input type="checkbox" name="animalc" id="label_4" value="4" /> <span>1</span> </label> </a> </li> <li> <a href='#'> <label for="label_5"> <input type="checkbox" name="animalc" id="label_5" value="5" /> <span>2</span> </label> </a> </li> <li> <a href='#'> <label for="label_6"> <input type="checkbox" name="animalc" id="label_6" value="6" /> <span>3</span> </label> </a> </li> </ul> </li> <li class='has-sub'><a href='#'>ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅</a> <ul> <li> <a href='#'> <label for="label_7"> <input type="checkbox" name="animalc" id="label_7" value="7" /> <span>1</span> </label> </a> </li> <li> <a href='#'> <label for="label_8"> <input type="checkbox" name="animalc" id="label_8" value="8" /> <span>2</span> </label> </a> </li> <li> <a href='#'> <label for="label_9"> <input type="checkbox" name="animalc" id="label_9" value="9" /> <span>3</span> </label> </a> </li> </ul> </li> <li class='has-sub'><a href='#'>Π‘Ρ‚ΠΈΠ»ΡŒ</a> <ul> <li> <a href='#'> <label for="label_10"> <input type="checkbox" name="animalc" id="label_10" value="10" /> <span>1</span> </label> </a> </li> <li> <a href='#'> <label for="label_11"> <input type="checkbox" name="animalc" id="label_11" value="11" /> <span>2</span> </label> </a> </li> <li> <a href='#'> <label for="label_12"> <input type="checkbox" name="animalc" id="label_12" value="12" /> <span>3</span> </label> </a> </li> </ul> </li> <li class='has-sub'><a href='#'>Π‘Ρ€Π΅Π½Π΄</a> <ul> <li> <a href='#'> <label for="label_13"> <input type="checkbox" name="animalc" id="label_13" value="13" /> <span>1</span> </label> </a> </li> <li> <a href='#'> <label for="label_14"> <input type="checkbox" name="animalc" id="label_14" value="14" /> <span>2</span> </label> </a> </li> <li> <a href='#'> <label for="label_15"> <input type="checkbox" name="animalc" id="label_15" value="15" /> <span>2</span> </label> </a> </li> </ul> </li> </ul> </div>