[英]Div will not automatically close when click inside item
小提琴: https : //jsfiddle.net/scrfbe95/
现在,即时通讯使用的是带有一个带有链接的项目列表的主div,一旦您单击证书列表列表项目,它将在主div的右侧显示另一个div。
但是我想做的是当您单击主div内的证书链接时,主div不会关闭。
<div id="main-div1" class="main-div">
Main div 1
<div class="content">
<ul>
<li> <a href=""> item 1 </a> </li>
<li> <a href=""> item 1 </a> </li>
</ul>
</div>
</div>
<div id="main-div2" class="main-div">
Main div 2
<div class="content">
<ul>
<li> <a href=""> item 1 </a> </li>
<li> <a href=""> item 1 </a> </li>
</ul> </div>
</div>
<div id="main-div3" class="main-div">
Main div 3
<div class="content">
<ul>
<li> <a href=""> item 1 </a> </li>
<li> <a href=""> item 1 </a> </li>
</ul> </div>
</div>
.main-div {
padding: 10px;
margin-top: 5px;
background-color: #000;
color: #fff;
}
.main-div > .content {
display: none;
color: #fff;
}
(function($) {
$(document).on('click','.main-div',function() { showMainDiv($(this)); });
function showMainDiv($el) {
var $elContent = $el.find('.content');
if ($elContent.is(':visible')) {
$elContent.stop(true,true).slideUp(500);
}
else {
$('.main-div').find('.content').stop(true,true).not($elContent).slideUp(500);
$elContent.slideDown(500);
}
}
})(jQuery);
修改点击监听器,使其仅在所单击的div是预期的div时才做出反应
$(document).on('click','.main-div',function(e) {
if (e.target !== this)
return;
showMainDiv($(this)); });
这是小提琴 ;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.