隐藏切换内容,如果用户未在特定框内单击

时间:2017-10-10 19:13:23

标签: javascript jquery

我有这个代码用于切换我网站上的菜单。它会在点击时打开一个菜单,当你点击另一个时关闭其他菜单,如果你点击外面就关闭它们。

问题是,我现在正在使用它来搜索我的搜索栏,但如果你在搜索框内点击它就会消失 - 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');
    });

1 个答案:

答案 0 :(得分:0)

不使用click,而是使用mouseup。如果目标是#search-bar,则它不会从切换内容元素中移除切换活动。

$(document).mouseup(function(e) {
        if (!$(e.target).is('#search-bar')) {
             $(".toggle-content").removeClass('toggle-active');
        }
});

您可以使用此jsFiddle来查看它。

希望这有帮助。