Управление меню jQuery (функции) - Открыть и закрыть

Question

У меня есть система меню CSS3 с поддержкой jQuery, которую я получил отсюда (http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/) Я использую это впечатляющее меню как часть моей навигации по сайту, однако у меня возникла проблема, Я хочу отобразить более одного из этих меню, так как у меня много ссылок.

код JQuery выглядит следующим образом (обратите внимание на # ДЛ-menu2 показывая, что я использую два меню не один)

 <script> 
     $(function() { 
      $('#dl-menu').dlmenu({ 
       animationClasses : { classin : 'dl-animate-in-2', classout : 'dl-animate-out-2' } 
      }); 
        $('#dl-menu2').dlmenu({ 
       animationClasses : { classin : 'dl-animate-in-2', classout : 'dl-animate-out-2' } 
      }); 
     }); 
    </script> 

Мой вопрос, как я могу сделать меню 1 закрыть меню, когда 2 является открыт? В тот момент, когда вы нажимаете меню 1, меню открывается, но не закрывается, когда вы нажимаете на меню 2.

Answer 1

Код dlmenu интересен, после инициализации вы можете снова вызвать его со строкой для выполнения функции. Таким образом вы могли бы изменить index.html из репозитория мерзавца (here) для автоматического открытия меню путем изменения $(function(){...} к:

$(function() { 
    $('#dl-menu').dlmenu(); 
    $('#dl-menu').dlmenu("openMenu"); 
}); 

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

Поэтому лучшим решением будет добавить свой собственный и использовать следующее:

$('#dl-menu').dlmenu("closeMenu"); 

'#dl-menu' является ссылка на идентификатор вашего меню DIV, так что вы можете указать все, что меню, которое вы хотите закрыть к Я бы.

Сложная часть запускает прослушиватель, когда нажимается другое меню. Это осложняется тем, что логика в dlmenu очищается и устанавливает щелчок на $ (body) всякий раз, когда открывается меню. Самый простой подход - добавить идентификатор к кнопке. В настоящее время логика в index.html является:

<button class="dl-trigger">Open Menu</button> 

Это не имеет идентификатора, так что добавьте один для каждого меню вы определили:

<button id="dl-menu1-button" class="dl-trigger">Open Menu</button> 

Затем вы можете изменить $(function() {...} сделать следующее (предполагая, что вы добавили другое меню и изменять идентификатор таких, что у вас есть dl-menu1 и dl-menu2):

$(function() { 
    $('#dl-menu1').dlmenu(); 
    $('#dl-menu2').dlmenu(); 

    $('#dl-menu1-button').on("click", function() { 
     $('#dl-menu2').dlmenu("closeMenu"); 
    }); 
    $('#dl-menu2-button').on("click", function() { 
     $('#dl-menu1').dlmenu("closeMenu"); 
    }); 
}); 

Я тестировал выше, getti ng клон репозитория git, добавление идентификатора и изменение инициализации, как указано выше. Работал так, как вы просили.