Question

伙计们我试图在click event上制作一个下拉菜单的通知菜单。我用下面的代码制作了这个，但是我有一个问题，我无法隐藏它。我想隐藏它点击身体和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代码设为：

<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>

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

<强>更新另外，如果您愿意，可以考虑更改$('.clicker').on('click',function(){ $('.display_noti').toggle(); });元素上的光标形状，以显示它是可点击的：

li

<强> UPDATE2：如果你以某种方式添加它可以让.clicker { cursor:pointer; }在你点击它时消失我不知道为什么但它修复了它：

<div class="display_noti">

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();
});

Jsfiddle

Answer 3

mObservable1 = Observable
  .concat(mObservable1Cached, mObservable1)
  .toList()
  .flatMapIterable(x -> x)
  .first();

$(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;
}

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

3 个答案: