关闭下拉菜单时,点击它的外部
Close dropdown menu when clicking outside of it
我在我的网站上有一个导航下拉菜单的问题,我几乎已经解决了,但不能完全修复。我担心我可能刚刚把我的代码弄得一团糟。
当我引入一个带有preventDefault事件的"滚动到锚标签"功能时,它破坏了我的导航菜单。除非你再次点击菜单按钮,否则菜单不会关闭。在你点击其中一个链接后,我终于让它关闭了,但这是现在关闭它的唯一方法。当我点击菜单按钮或网站上的其他任何地方时,我如何关闭它?我确信这一点jQuery是罪魁祸首,但不知道如何修复它或围绕它工作。
菜单的HTML: <div class="main-nav navbtn">
<div class="dropdown"><i onclick="myFunction()" class="dropbtn material-icons md-48"></i>
<div id="myDropdown" class="dropdown-content">
<a href="#home" class="home navlink">Home</a>
<a href="#about" class="navlink">About</a>
<a href="#services" class="navlink">Services</a>
<a href="#work" class="navlink">Work</a>
<a href="#testimonials" class="navlink">Testimonials</a>
<a href="#contact" class="navlink">Contact</a>
<a href="http://blog.ignitiondesignpdx.com" target="_blank" class="external navlink">Blog</a>
</div>
</div>
</div>
和相关的jQuery:
// When the user clicks on the button, toggle between hiding and showing the dropdown content
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
//// Close the dropdown menu if the user clicks outside of it
window.onclick = function (event) {
if (!event.target.matches('.dropbtn')) {
dropdowns.forEach(function (openDropdown) {
dropdown.classList.contains('show') && dropdown.classList.remove('show');
});
}
};
////This is the section I made for it to close after clicking a link
jQuery(document).ready(function ($) {
$('.dropbtn').on('click', function () {
$(".dropdown-content").show();
});
$('.navlink').on('click', function () {
$(".dropdown-content").hide();
});
});
这是一个潜在的问题,它会把其他函数搞砸。
//Scroll to anchor tags
$(document).on('click', 'a:not(.external)', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
var $root = $('html, body');
$('a').click(function () {
$root.animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;
});
我到底应该怎么做才能修复我的菜单?
您可以查看正在进行的网站http://idpdx.kreigd.com
更新:我想我知道事情变得混乱的地方了。我用来添加下拉功能的函数要求在单击. droptn元素时添加类"show",并在再次单击时删除它。
所以我真正需要做的是重新编写代码,这样点击。droptn就会打开下拉菜单,点击其他任何东西,包括导航按钮和。droptn元素,都会关闭下拉菜单。
更新2:尝试不同的方法。忽略第一个更新
试试这个&让我知道
$(document).click(function() {
$(".dropdown-content").hide();
// $(".dropdown-content").removeClass("show");
});
$(".dropdown-content").click(function(e) {
e.stopPropagation(); // if you click on the div itself it will cancel the click event.
});
你可以尝试这样做
$('body').not("#myDropdown").off('click').on('click',function(){$("#myDropdown").removeClass("show")});
我在你的网站上试过代码,但是你在窗口上写了一些代码。
@Nikhil的回答让我更进一步,但也有缺点。我想出了以下解决方案:
$(document).click(function (e) {
var target = $(e.target);
// check the actual element being clicked is not the dropdown trigger itself
if (!target.hasClass('dropdown-trigger') && !target.closest('.dropdown-trigger').length) {
// use the framework to close the dropdown instead of just hiding it: hiding it will require you to click the trigger 2 times to reopen!
$('dropdown-trigger').dropdown('close');
}
});
相关文章:
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- angular的下拉菜单
- 创建带有和不带有JavaScript的Bootstrap下拉菜单
- 创建下拉菜单
- 下拉菜单在菜单按钮的边缘闪闪发光
- I'我设计了一个下拉菜单,onclick会出现,而on blur会消失
- 硒IDE下拉菜单
- 我的下拉菜单中的链接不起作用
- Bootstrap Dropdown selection是在*all*下拉菜单上设置选择
- 在angularjs UI网格列中选择下拉菜单不适用于外部editcellTemplate
- 当我们在平板电脑上单击外部时,如何关闭引导程序 3 下拉菜单
- JavaScript 下拉菜单在单击时处于活动状态,在外部单击时不活动
- 单击带有窗体的下拉菜单,单击外部关闭
- 关闭下拉菜单时,点击它的外部
- 创建一个可编辑的下拉菜单,并从外部JS填充它
- 需要jQuery下拉菜单关闭,只有当有人点击它的外部
- 使用外部控件显示下拉菜单
- 单击外部关闭jQuery下拉菜单
- 单击时隐藏在菜单外部的下拉菜单
- 在外部单击时隐藏下拉菜单