当我在菜单外单击时,下拉菜单没有关闭。我已尝试使用函数,但无法解决它。
<div onclick="document.getElementsByClassName('custom-menu-cont')[0].classList.toggle('hidden')"; class="custom-menubutton">
<i class="glyphicon glyphicon-th" style="font-size:20px;"></i>
</div>
</div>
<div class="custom-menu-cont hidden">
<div class="custom-menu">
<div class="arrow-up"></div>
<div>
<div class="custom-menu-item">
<a href="http://blog.fossasia.org" target="_blank">
<div class="custom-icon"><img src="{{ url_for('static', filename='blog.png') }}"></div>
<p class="custom-title">Blogs</p></a>
</div>
<hr style="margin-bottom: 10px; margin-top: 10px;">
<div class="custom-menu-item">
<a href="https://susper.com/" target="_blank">
<div class="custom-icon"><img src="{{ url_for('static', filename='susper.png') }}" style="width: 60px;height: 16px;"></div>
<p class="custom-title">Susper</p></a>
</div>
<div class="custom-menu-item">
<a href="https://chat.susi.ai/" target="_blank">
<div class="custom-icon"><img src="{{ url_for('static', filename='susi.png') }}"></div>
<p class="custom-title">Susi</p></a>
</div>
<div class="custom-menu-item">
<a href="https://loklak.org/" target="_blank">
<div class="custom-icon"><img src="{{ url_for('static', filename='loklak.png') }}"></div>
<p class="custom-title">loklak</p></a>
</div>
<div class="custom-menu-item">
<a href="https://phimp.me/" target="_blank">
<div class="custom-icon"><img src="{{ url_for('static', filename='phimp.png') }}"></div>
<p class="custom-title">Phimp.me</p></a>
</div>
<div class="custom-menu-item">
<a href="https://pslab.fossasia.org" target="_blank">
<div class="custom-icon"><img src="{{ url_for('static', filename='Pslab.png') }}"></div>
<p class="custom-title">PS Lab</p></a>
</div>
<hr style="margin: 10px">
<div style="display: flex;justify-content: center;align-items: center; margin: 0 0 -20px 0">
More on <a href="https://labs.fossasia.org/" target="_blank" style="text-decoration: none;color: #737373"> labs.fossasia.org</a>
</div>
</div>
</div>
</div>
我必须做哪些更改才能关闭菜单?
帮我关闭下拉菜单。
提前致谢
最佳答案
您可以使用 javascript 来实现。
function hideDiv(){
document.getElementsByClassName('custom-menu-cont')[0].classList.remove('hidden');
}
document.addEventListener("click", hideDiv, false);
您还可以从 <div class="custom-menubutton">
中删除 onclick并用 javascript 编写,因为这是一个更好的约定。
function hideDivStopPropagation(e) {
document.getElementsByClassName('custom-menu-cont')[0].classList.toggle('hidden');
e.stopPropagation();
}
document.getElementsByClassName('custom-menubutton')[0].addEventListener("click", hideDivStopPropagation, false);
更简单的方法是使用 JQuery。
$(document).on('click', function() {
$('.custom-menu-cont').toggleClass('hidden');
});
$('.custom-menubutton').on('click', function(e) {
e.stopPropagation();
$('.custom-menu-cont').toggleClass('hidden');
});
注意:我使用了e.stopPropagation()
因为,当你点击 div.custom-menubutton
,这意味着我也点击了文档。因此它运行 hideDiv 函数并始终隐藏菜单(即使您单击 div 打开下拉菜单)。所以e.stopPropagation()
防止您的点击一直传播到文档。
关于css - 在菜单外单击时,下拉菜单不会关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51039997/