Как закрыть меню при нажатии за его пределами

Question

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

Это мой JQuery код:

 <script> 
    $(document).ready(function(){ 
     $(".a-for-noti-scroll").on("click",function(){ 
      $("#nano").toggleClass("x"); 
      $(".top-triangle-noti-scroll").toggleClass("y"); 
      e.stopPropagation(); 
     }); 
     $("body").on("click",function(e){ 
      $('#nano').css('visibility', 'hidden'); 
      $(".top-triangle-noti-scroll").css('display', 'none'); 
      e.stopPropagation(); 
     }); 
    }); 
    </script> 

Но это не работает.

Я пробовал .hide() для body, но таким образом меню не открывается. Что мне делать?

Answer 1

вы можете иметь логическую ошибку, попробуйте как в этом примере:

$(document).ready(function(){ 

    // click inside will leave it open 
    $("#noti").on("click",function(e){ 
     $('#noti').css('display','block'); 
     e.stopPropagation(); 
    }); 

    // just for this example to open the "menu" 
    $("#top").on("click",function(e){ 
     $("#noti").css('display','block'); 
     e.stopPropagation(); 
    }); 

    // any click around closes 
    $(document).on("click",function(e){ 
     $('#noti').css('display', 'none'); 
     e.stopPropagation(); 
    }); 
}); 

вот working fiddle

Это пример только для clickhandler штабелирования.