我有这个代码用于切换我网站上的菜单。它会在点击时打开一个菜单,当你点击另一个时关闭其他菜单,如果你点击外面就关闭它们。
问题是,我现在正在使用它来搜索我的搜索栏,但如果你在搜索框内点击它就会消失 - woops。是否可以修改隐藏代码以检测用户是否在代码的特定区域内单击?
// navbar toggle menu
$(document).on('click', ".toggle-nav > a", function(event) {
event.preventDefault();
event.stopPropagation();
var $toggle = $(this).closest('.toggle-nav').children('.toggle-content');
if ($toggle.hasClass('toggle-active'))
{
$($toggle).removeClass('toggle-active');
}
else
{
$(".toggle-content").removeClass('toggle-active');
$($toggle).addClass('toggle-active');
}
});
// hide the toggle-nav if you click outside of it
$(document).on("click", function ()
{
$(".toggle-content").removeClass('toggle-active');
});
答案 0 :(得分:0)
不使用click
,而是使用mouseup
。如果目标是#search-bar
,则它不会从切换内容元素中移除切换活动。
$(document).mouseup(function(e) {
if (!$(e.target).is('#search-bar')) {
$(".toggle-content").removeClass('toggle-active');
}
});
您可以使用此jsFiddle来查看它。
希望这有帮助。