我搜索了我的一个网站,当我按下我的 div 时,它会显示所有类别。当您单击某个类别时,该 div 会自行关闭。我的问题是,如果客户单击我的 div 并且不想单击任何类别,我希望每当该客户单击该 div 之外的任何位置时都关闭该 div。
这是我的 HTML:
<div id="wrap-categories">
<p>Choose a category</p>
<img src="..." alt="white-arrow">
<ul class="" style="display: none;">
<li data-value="1">Category 1</li>
<li data-value="2">Category 2</li>
<li data-value="3">Category 3</li>
</ul>
</div>
这是我的 Javascript,每当我尝试单击 div 外部来关闭它时,它都无法正常工作:
$('#wrap-categories > p').click(function() {
$('#wrap-categories > ul').addClass('opened').show();
});
if($('#wrap-categories > ul').hasClass('opened')) {
$(document).click(function(e) {
console.log(1);
// close div here
});
}
它的作用是,即使我单击 div #wrap-categories,它也已经在 console.log 中放入了 1。但只有当用户在 div 打开时在其外部单击时,我才真正需要关闭它,并且还具有“opened”类。
最佳答案
你是这个意思吗?
$('#wrap-categories').click(function(e) {
e.stopPropagation();
});
$('#wrap-categories').click(function() {
$('#wrap-categories > ul').addClass('opened').show();
});
$(document).click(function() {
$('#wrap-categories > ul').removeClass('opened').hide();
});
关于javascript - 如何通过单击外部来关闭 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39149056/