Блог

Главная - Вопросы по программированию - Трехуровневое складное меню Javascript

Трехуровневое складное меню Javascript

#javascript #multi-level #expandable #collapsable

#javascript #многоуровневый #расширяемый #сворачиваемый

Вопрос:

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

Вот существующий сценарий:

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
   <!-- <script type="text/javascript" language="javascript" charset="utf-8" src="nav.js"></script> -->
<!--[if lt IE 9]>
  <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


  <script>
  $(document).ready(function(){
  $("#nav > li > a").on("click", function(e){
    if($(this).parent().has("ul")) {
      e.preventDefault();
    }

    if(!$(this).hasClass("open")) {
      // hide any open menus and remove all other classes
      $("#nav li ul").slideUp(350);
      $("#nav li a").removeClass("open");
      
      // open our new menu and add the open class
      $(this).next("ul").slideDown(350);
      $(this).addClass("open");
    }
    
    else if($(this).hasClass("open")) {
      $(this).removeClass("open");
      $(this).next("ul").slideUp(350);
    }
  });
});
</script>

Ответ №1:

Вы можете достичь того же результата с относительно небольшим количеством кода по сравнению с тем, что у вас есть.

Использование css для обработки отображения, возможно, проще в управлении, поскольку javascript просто переключает класс, на который вы можете настроить таргетинг в вашем css. Это также означает, что у вас может быть столько уровней, сколько вы пожелаете.

Это работает за счет использования селектора next sibling в css 

 $('.menu-trigger').click(function(){
  $(this).toggleClass('active')
  
  // if you really wish to keep the jquery animation you can do this
  // $(this).next('ul').slideToggle()
}) 
 /* you can use the sibling selector ' ' to target the list */
.menu-trigger   ul {
  display: none;
}

.menu-trigger.active   ul {
  display: block;
} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a class="menu-trigger">parent</a>
    <ul>
      <li>
        <a class="menu-trigger">child</a>
        <ul>
          <li>
            <a class="menu-trigger">grandchild</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Комментарии:

1. Спасибо @synthet1c — отлично работает! Хотя я бы предпочел избегать одновременного открытия более одного подменю (т. Е. сворачивать все остальные меню при нажатии на одно). Я внимательно изучил похожие вопросы на этом сайте, но ни один код не работает для меня. У вас есть какие-нибудь советы?

Ответ №2:

Я написал это, это просто, но в некотором роде иллюстрирует то, чего вы хотите достичь.

 $('li').hover(function(){
    $(this).children('ul:eq(0)').show();
}, function(){
    $(this).children('ul:eq(0)').hide();
});

http://codepen.io/clarenswd/pen/GjBaWp

Комментарии:

1. Спасибо @clarenswd — работает очень хорошо, хотя я бы предпочел, чтобы подменю открывалось при нажатии, а не при наведении курсора мыши — возможно ли это с помощью вашего кода?

Метки: