Usando JQuery para abrir fechar o menu

votos
1

ok então eu tenho esse script que controla uma abertura / fecho de menu de ....

das três funções principais (visto abaixo) os dois primeiros funcionam bem em que o botão de alternância muda sua classe (com um X) ativo que o torna um X.

No entanto, a quarta função (comentada) não funciona ... Isto foi projetado de modo que quando você clica no corpo ou em qualquer lugar do menu quando ele estiver aberto, ele será fechado. Por favor, alguém pode me ajudar a reescrever a última função para que ele funcione.

$(document).ready(function () {
    var $navToggle = $('.nav-toggle');
    $(.navbtn).click(function () {
        if($navToggle.hasClass('active')){
            $('#menu').multilevelpushmenu('collapse');
            $navToggle.removeClass('active');
            $(this).addClass('active');
        }
        else{
            $('#menu').multilevelpushmenu('expand');
            $navToggle.addClass('active');
            $(this).removeClass('active');
        }
    });
$(.navbtn).hover(function () {
    $('.nav-toggle').addClass('hover');
},function(){
    $('.nav-toggle').removeClass('hover');
});


/*$('body').on('click', function(e){
 if( !$(this).closest('#menu, .navbtn, .nav-toggle').length) {
    $('#menu').multilevelpushmenu('collapse');
    $navToggle.removeClass('active');
        e.stopPropagation();        
    }; 
});*/
});

Eu forneci uma jsFiddle abaixo (O menu está definido para colapso completo no arranque não aberto como na demo fyi)

http://jsfiddle.net/greggy_coding/ppX53/66/

Publicado 01/06/2015 em 11:18
fonte usuário
Em outras línguas...                            


2 respostas

votos
2

Use e.targetem vez de this, como thisrefere corpo e não elemento clicado atual.


event.target

O elemento DOM que iniciou o evento.


$('body').on('click', function (e) {
    if (!$(e.target).closest('#menu, .navbtn, .nav-toggle').length) {
        $('#menu').multilevelpushmenu('collapse');
        $navToggle.removeClass('active');
        e.stopPropagation();
    };
});

Atualizado Fiddle

Respondeu 01/06/2015 em 11:27
fonte usuário

votos
0

Aqui está o javascript modificado que iria trabalhar:

$(document).ready(function(){
    $('#menu').multilevelpushmenu();
});


$(document).ready(function () {
    var $navToggle = $('.nav-toggle');
    $(".navbtn").click(function (e) {
        e.stopPropagation();
        if($navToggle.hasClass('active')){
            $('#menu').multilevelpushmenu('collapse');
            $navToggle.removeClass('active');
            $(this).addClass('active');
        }
        else{
            $('#menu').multilevelpushmenu('expand');
            $navToggle.addClass('active');
            $(this).removeClass('active');
        }
    });

    $(".navbtn").hover(function () {
        $('.nav-toggle').addClass('hover');
    },function(){
         $('.nav-toggle').removeClass('hover');
    });

    $('#menu').on('click', function(e) {
         e.stopPropagation();
    });


    $('body').on('click', function(e){
        $('#menu').multilevelpushmenu('collapse');
        $navToggle.removeClass('active');
    });
});

Aqui está a jsFiddle trabalhando bifurcada: http://jsfiddle.net/ytnLyqrv/1/

Respondeu 01/06/2015 em 11:43
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more