SlideUp/SlideDown в списке ul

260

16 января 2018, 12:07

Всем привет. У меня есть список:

$('.top').click(function() { 
  if ($(this).hasClass('open-menu')) { 
    $(this).removeClass('open-menu'); 
    $(this).parent().children('.pod-menu').slideUp('slow'); 
  } else { 
    $(this).addClass('open-menu'); 
    $(this).parent().children('.pod-menu').slideDown('slow'); 
  } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul> 
  <li> 
    <span class='top'>Одежда для малышей</span> 
    <div class='pod-menu'> 
      <a>Шапки</a> 
      <a>Обувь</a> 
    </div> 
  </li> 
  <li> 
    <span class='top'>Одежда для женщин</span> 
    <div class='pod-menu'> 
      <a>Шапки</a> 
      <a>Обувь</a> 
    </div> 
  </li> 
  <li> 
    <span class='top'>Одежда для мужчин</span> 
    <div class='pod-menu'> 
      <a>Шапки</a> 
      <a>Обувь</a> 
    </div> 
  </li> 
  <ul>

По клику на top, у меня к pod-menuдобавляется dislpay: block, но если нажать на другую категорию, то у предыдущей категории подменю не скрывается. Подскажите как можно сделать так, чтобы по клику на одну категорию подменю раскрывалось только у нее, а у остальных скрывалось?

Answer 1

Ищем все подменю, кроме текущего, и закрываем. Я не стал выделять одинаковые фрагменты кода в переменные, чтоб было понятней, но вам следует это сделать

$('.pod-menu').slideUp() 
// $('.pod-menu').not($(this)).slideDown() 
 
$('.top').click(function () { 
        if ($(this).hasClass('open-menu')) { 
            $(this).removeClass('open-menu'); 
            $(this).parent().children('.pod-menu').slideUp('slow'); 
        } else { 
            $(this).addClass('open-menu'); 
            $('.pod-menu').not($(this).parent().children('.pod-menu')).slideUp() 
            $(this).parent().children('.pod-menu').slideDown('slow'); 
 
        } 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul> 
  <li> 
  <span class='top'>Одежда для малышей</span> 
     <div class='pod-menu'> 
        <a>Шапки</a> 
        <a>Обувь</a> 
     </div> 
  </li> 
  <li> 
   <span class='top'>Одежда для женщин</span> 
   <div class='pod-menu'> 
      <a>Шапки</a> 
      <a>Обувь</a> 
    </div> 
  </li> 
  <li> 
    <span class='top'>Одежда для мужчин</span> 
    <div class='pod-menu'> 
      <a>Шапки</a> 
      <a>Обувь</a> 
    </div> 
  </li>