如何隱藏在jQuery單擊功能后顯示的隱藏div

Question

伙計們，我試圖制作一個通知菜單，該菜單會在click event中下拉。我已經用下面的代碼做到了這一點，但是我有一個問題，我無法將其隱藏起來。我想通過單擊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; }

Update2：如果以某種方式添加此代碼，則可以使<div class="display_noti">在單擊時消失，雖然我不知道為什么，但是它可以解決此問題：

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

Answer 2

// hide some divs when click on window
        var actionwindowclick = function(e){
            if (!$(".display_noti, .clicker").is(e.target) // if the target of the click isn't the container...
                && $(".display_noti , .clicker").has(e.target).length === 0) // ... nor a descendant of the container
            {
                $(".display_noti").hide(); 
            }
        }

$(window).on('click',function(e){
  actionwindowclick (e);
  });
$('.clicker').on('click',function(){
  $(".display_noti").slideToggle();
});

傑斯菲德爾

Answer 3

 $(document).click(function(e) { $('.display_noti').hide(); }); $('.clicker').on('click', function(e) { $('.display_noti').toggle(); e.stopPropagation(); }); $('.display_noti').click(function(e){ e.stopPropagation(); }); 

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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>