javascript - 如何隐藏在jquery点击功能后显示的隐藏div

Question

伙计们，我试图制作一个通知菜单，它在 click 事件 上下拉。我已经用下面的代码制作了它，但我有一个问题，我无法将它隐藏起来。我想隐藏通过单击 body 和 div 本身。我该怎么做？

我的 html 部分。

<li class="clicker" >
 <a>Notification</a> 
    <div class="display_noti">
     <ol>
       <span>This is it :D</span><br>
       <span>This is it :D</span><br>
       <span>This is it :D</span><br>
      </ol>
    </div>
</li> 

我的CSS部分

.display_noti
 {
    width: 400px;
    height: fixed;
    display:none;
    background-color: black;
    color: white;
    position: absolute;
    top: 40px;
    z-index: 2;
    padding: 5px;
 }

我的 jquery 部分。

$('.clicker').on('click',function(){
 if($('.display_noti').css("display","none")){
    $('.display_noti').show();
 }

});

我也在尝试使用这段 jquery 代码，但是当我保留这段代码时，show() 函数不起作用。

$('body').on('click',function(){
  $('.display_noti').css("display","none");
  });

Answer 1

只需将您的 js 代码设为:

$('.clicker').on('click',function(){
   $('.display_noti').toggle();
});

http://jsfiddle.net/jp42q7t8/5/

更新:另外，如果您愿意，可以考虑更改 li 上的光标形状元素来表明它是可点击的，如下所示:

.clicker { cursor:pointer; }

更新 2:如果你以某种方式添加它，你可以制作 <div class="display_noti">当你点击它时消失我不知道为什么但它修复了它:

 $('.display_noti').on('click',function(){
     $(this).css({'background':'black'}); //same background color of the inner div
 });