Многоуровневое улучшение меню аккордеона?

Question

Я ищу для создания многоуровневого меню аккордеона. Я создал это меню (http://codepen.io/anon/pen/ogdovx) до сих пор, но я новичок в jquery и достигал пределов своих знаний.

Как это можно улучшить? Мне нужно, чтобы они только сбрасывали предметы, у которых есть суб-UL, и сворачивают братьев и сестер/детей на открытом.

Любая помощь в улучшении моего кода будет оценена по достоинству. Приветствия!

код из codepen:

$(document).ready(function() { 
 

 
    $(".main > li > a").click(function() { 
 
     $('.main ul').slideUp(); 
 
     if (!$(this).next().is(":visible")) { 
 
     $(this).next().slideDown(); 
 
     } 
 
    }) 
 

 
    $(".main > li > ul > li > a").click(function() { 
 
     $('.main ul ul').slideUp(); 
 
     if (!$(this).next().is(":visible")) { 
 
     $(this).next().slideDown(); 
 
     } 
 
    }) 
 

 
    $(".main ul ul li > a").click(function() { 
 
     $('.main ul ul ul').slideUp(); 
 
     if (!$(this).next().is(":visible")) { 
 
     $(this).next().slideDown(); 
 
     } 
 
    }) 
 
    
 
});

ul.children { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="main"> 
 
    <li class="page_has_children"> 
 
    <a href="#">Link</a> 
 
    <ul class="children"> 
 
     <li class="page_has_children"> 
 
     <a href="#">Sub Link</a> 
 
     <ul class="children"> 
 
      <li> 
 
      <a href="#">Sub Sub Link</a> 
 
      <ul class="children"> 
 
       <li><a href="#">Child Link</a> 
 
       </li> 
 
       <li><a href="#">Child Link</a> 
 
       </li> 
 
       <li><a href="#">Child Link</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
      <li><a href="#">Sub Link</a> 
 
      </li> 
 
      <li><a href="#">Sub Link</a> 
 
      </li> 
 
      <li><a href="#">Sub Link</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li class="page_has_children"> 
 
     <a href="#">Link</a> 
 
     <ul class="children"> 
 
      <li><a href="#">Sub Link</a> 
 
      </li> 
 
      <li><a href="#">Sub Link</a> 
 
      </li> 
 
      <li><a href="#">Sub Link</a> 
 
      </li> 
 
      <li><a href="#">Sub Link</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Sub Link</a> 
 
     </li> 
 
     <li><a href="#">Sub Link</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="page_has_children"> 
 
    <a href="#">Link</a> 
 
    <ul class="children"> 
 
     <li><a href="#">Sub Link</a> 
 
     </li> 
 
     <li><a href="#">Sub Link</a> 
 
     </li> 
 
     <li><a href="#">Sub Link</a> 
 
     </li> 
 
     <li><a href="#">Sub Link</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="page_has_children"> 
 
    <a href="#">Link</a> 
 
    <ul class="children"> 
 
     <li><a href="#">Sub Link</a> 
 
     </li> 
 
     <li><a href="#">Sub Link</a> 
 
     </li> 
 
     <li><a href="#">Sub Link</a> 
 
     </li> 
 
     <li><a href="#">Sub Link</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="page_has_children"> 
 
    <a href="#">Link</a> 
 
    <ul class="children"> 
 
     <li><a href="#">Sub Link</a> 
 
     </li> 
 
     <li><a href="#">Sub Link</a> 
 
     </li> 
 
     <li><a href="#">Sub Link</a> 
 
     </li> 
 
     <li><a href="#">Sub Link</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 1

Наиболее очевидный способ улучшить это, чтобы создать некоторые ручки, так что вы не должны дублировать код так много. Самый простой способ - просто поместить класс в любые родительские ссылки. Делая это, вам нужно только позвонить, чтобы добавить обработчики событий.

$(".parent-link").click(function() { 
 
    var children = $(this).next(); //shorthand for the next ul 
 
    var parents = $(this).parents(".children"); //any uls above me 
 

 
    //close all other uls not above me in the tree 
 
    $('.children').not(parents).slideUp(); 
 
    
 
    //open this if its closed 
 
    children.filter(":hidden").slideDown(); 
 
})

ul.children { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="main"> 
 
    <li class=".parent-link"> 
 
    <a class="parent-link" href="#">Link</a> 
 
    <ul class="children"> 
 
     <li class="page_has_children"> 
 
     <a class="parent-link" href="#">Sub Link</a> 
 
     <ul class="children"> 
 
      <li> 
 
      <a class="parent-link" href="#">Sub Sub Link</a> 
 
      <ul class="children"> 
 
       <li><a href="#">Child Link</a> 
 
       </li> 
 
       <li><a href="#">Child Link</a> 
 
       </li> 
 
       <li><a href="#">Child Link</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
      <li><a href="#">Sub Link</a> 
 
      </li> 
 
      <li><a href="#">Sub Link</a> 
 
      </li> 
 
      <li><a href="#">Sub Link</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li class="page_has_children"> 
 
     <a class="parent-link" href="#">Link</a> 
 
     <ul class="children"> 
 
      <li><a href="#">Sub Link</a> 
 
      </li> 
 
      <li><a href="#">Sub Link</a> 
 
      </li> 
 
      <li><a href="#">Sub Link</a> 
 
      </li> 
 
      <li><a href="#">Sub Link</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Sub Link</a> 
 
     </li> 
 
     <li><a href="#">Sub Link</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="page_has_children"> 
 
    <a class="parent-link" href="#">Link</a> 
 
    <ul class="children"> 
 
     <li><a href="#">Sub Link</a> 
 
     </li> 
 
     <li><a href="#">Sub Link</a> 
 
     </li> 
 
     <li><a href="#">Sub Link</a> 
 
     </li> 
 
     <li><a href="#">Sub Link</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="page_has_children"> 
 
    <a class="parent-link" href="#">Link</a> 
 
    <ul class="children"> 
 
     <li><a href="#">Sub Link</a> 
 
     </li> 
 
     <li><a href="#">Sub Link</a> 
 
     </li> 
 
     <li><a href="#">Sub Link</a> 
 
     </li> 
 
     <li><a href="#">Sub Link</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="page_has_children"> 
 
    <a class="parent-link" href="#">Link</a> 
 
    <ul class="children"> 
 
     <li><a href="#">Sub Link</a> 
 
     </li> 
 
     <li><a href="#">Sub Link</a> 
 
     </li> 
 
     <li><a href="#">Sub Link</a> 
 
     </li> 
 
     <li><a href="#">Sub Link</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>