JavaScript Onclick Dropdown Menu не работает

Question

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

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

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

$(function() { 
$('.dropdown').click(function() { 
    $('.sublinks').stop(false, true).hide(); 

    var submenu = $(this).parent().next(); 

    submenu.css({ 
     position: 'absolute', 
     top: $(this).offset().top + $(this).height() + 'px', 
     left: $(this).offset().left + 'px', 
     zIndex: 1000 
    }); 

    submenu.stop().slideDown(300); 



    //click anywhere outside the menu 
    $(document).click(function() { 
     var $el = $(this); 
     $el.not('.dropdown') && $el.slideUp(300); 
    }); 
}); 
}); 

Answer 1

В коде, который для мыши в любом месте в документе, это будет указывать на документ, а не фактического элемента, в котором произошло событие. Вы можете изменить свой код, как показано ниже (используйте e.target вместо this):

$(function() { 
    $('.dropdown').click(function() { 
     $('.sublinks').stop(false, true).hide(); 

     var submenu = $(this).parent().next(); 

     submenu.css({ 
      position: 'absolute', 
      top: $(this).offset().top + $(this).height() + 'px', 
      left: $(this).offset().left + 'px', 
      zIndex: 1000 
     }); 

     submenu.stop().slideDown(300); 
    }); 
    //click anywhere outside the menu 
    $(document).click(function(e) {   
      var $el = $(e.target); 
      if(!$el.hasClass('.dropdown') && $el.closest(".dropdown").length == 0 && !$el.hasClass('.sublinks') && $el.closest(".sublinks").length == 0) 
       $('.sublinks:visible').slideUp(300); 
    }); 
}); 

Смотрите также $el.closest(".dropdown").length == 0 это, чтобы убедиться, что щелчок происходит не в дочернем элементе .dropdown

Вот демо для него. Нажмите в разных местах и ​​проверьте консоль: http://jsfiddle.net/2ryWF/. Вы обнаружите, что это всегда указывает на документ

Answer 2

Похоже, крючок для мыши в любом месте находится внутри выпадающий щелчка крючка, попробовать что-то вроде этого (не проверено);

$(function() { 
//click on menu(dropdown div) 
    $('.dropdown').click(function() { 
     $('.sublinks').stop(false, true).hide(); 

     var submenu = $(this).parent().next(); 

     submenu.css({ 
      position: 'absolute', 
      top: $(this).offset().top + $(this).height() + 'px', 
      left: $(this).offset().left + 'px', 
      zIndex: 1000 
     }); 

     submenu.stop().slideDown(300); 
    }); 

//click anywhere in document 
    $(document).click(function() { 
     var $el = $(this); 
     $el.not('.dropdown') && $el.slideUp(300); 
    }); 
}); 

Answer 3

Попробуйте использовать blur event:

$('.dropdown').blur(function() { 
    var $submenu = (...); // <- get submenu selector here 
    $submenu.slideUp(); 
});