Вертикальное раскрывающееся меню jQuery - закрыть открытое меню при новом нажатии

Question

Я делаю мобильную вертикальную навигацию, и она работает так, как ожидалось, единственная проблема заключается в том, что пользователь может расширять каждое подменю, и страница становится очень длинной. Я хотел бы иметь возможность закрыть любое меню, когда новая ссылка будет нажата для расширения. У меня есть следующий код

 <nav id="AlphaNav"> 
      <ul> 
       <li class="clickExpand"> 
        <span> 
         NEWS 
         <i class="fa fa-chevron-down" aria-hidden="true"></i> 
        </span> 

        <ul> 
         <li><a href="#">all</a></li> 
         <li><a href="#">agency news</a></li> 
         <li><a href="#">brand news</a></li> 
         <li><a href="#">media news</a></li> 
         <li><a href="#">marketing news</a></li> 
         <li><a href="#">sector news</a></li> 
         <li><a href="#">technology news</a></li> 
         <li><a href="#">podcasts</a></li> 
        </ul> 
       </li> 
       <li class="clickExpand"> 
        <span> 
         TOP BRANDS &amp; AGENCIES 
         <i class="fa fa-chevron-down" aria-hidden="true"> </i> 
        </span> 
        <ul> 
         <li><a href="#">agency news</a></li> 
         <li><a href="#">brand news</a></li> 
         <li><a href="#">media news</a></li> 
         <li><a href="#">marketing news</a></li> 
         <li><a href="#">sector news</a></li> 
         <li><a href="#">technology news</a></li> 
         <li><a href="#">podcasts</a></li> 
        </ul> 
       </li> 
      </ul> 
     </nav> 

И мой текущий скрипт, который позволяет пункты меню slideToggle

$(document).ready(function() { 
      $('#AlphaNav > ul > li > span').click(function() { 
       $(this).closest('li').find('ul').slideToggle(); 
       $(this).find('i').toggleClass('fa-chevron-down fa-chevron-up'); 
      }); 
     }); 

Я добавил очень быстро перо http://codepen.io/shanekweb/pen/dNamOZ , так что вы можете увидеть, как это выглядит. Я смотрел на другие сообщения, но я не могу адаптировать его для работы с моим кодом. Если кто-то может помочь

Answer 1

Обновить ваш Jquery код для:

$(document).ready(function() { 
      $('#AlphaNav > ul > li > span').click(function() { 
       $(this).closest('li').siblings().find('ul:visible').slideUp(); // ADDED 
       $(this).closest('li').siblings().find('ul:visible').parent().find('i').toggleClass('fa-chevron-down fa-chevron-up'); // ADDED 2 
       $(this).closest('li').find('ul').slideToggle(); 
       $(this).find('i').toggleClass('fa-chevron-down fa-chevron-up'); 
      }); 
     });