jQuery: Развернуть только одну панель за раз

Question

Внутри каждого <li> при щелчке по адресу <i> он расширяет и сворачивает следующее: <ul>. Необходимо сделать так, чтобы щелкнуть еще один <i>, он сбрасывает предыдущие <ul>.

Смотрите мой fiddle

<ul class="nav-main"> 
    <li> <a href="/en/courses">Courses</a><i class="expand closed"></i> 

     <ul class="drop"> 
      <li><a href="#">Campuses</a> 
      </li> 
      <li><a href="#">Online Learning</a> 
      </li> 
      <li><a href="#">Start dates and schedules</a> 
      </li> 
      <li><a href="#">Learning and Support</a> 
      </li> 
     </ul> 
    </li> 
    <li> <a href="#">Outcomes</a><i class="expand closed"></i> 

     <ul class="drop"> 
      <li><a href="#">Career Starter Program</a> 
      </li> 
      <li><a href="#">Progress to a degree</a> 
      </li> 
      <li><a href="#">Career Pathways</a> 
      </li> 
     </ul> 
    </li> 
</ul> 

Answer 1

Вы хотите, чтобы петли через каждую панель и убедитесь, что он закрыт всякий раз, когда пункт щелкнул, закрывая любые, которые не пункт щелкнул. Вот ваша скрипка обновления: https://jsfiddle.net/zb2eu19g/8/

Соответствующий код JS:

// Main Menu Slider 
$('.nav-main .expand').on('click', function (e) { 

    var clickedPanel = this; 

    $('.nav-main .expand').each(function() { 
     if (this !== clickedPanel && !$(this).hasClass('closed')) { 
      $(this).addClass('closed').next('ul').slideUp(300, function() { 
       $(this).removeAttr('style'); 
      }); 
     } 
    }); 

    if ($(this).hasClass('closed')) { 
     $(this).removeClass('closed').next('ul').slideDown(300); 
    } else { 
     $(this).addClass('closed').next('ul').slideUp(300, function() { 
      $(this).removeAttr('style'); 
     }); 
    } 
    e.preventDefault(); 
}); 

Если бы это было мне, я бы извлечь из логики, чтобы открывать и закрывать элементы в функцию, чтобы избавиться от некоторого дублирования здесь , но это дает вам начало.