伙计们,我试图制作一个通知菜单,它在 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");
});
最佳答案
只需将您的 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
});
关于javascript - 如何隐藏在jquery点击功能后显示的隐藏div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33315526/