Question

页面标题中的菜单在页面向下滚动时会隐藏。但是可以通过单击标题中的按钮打开它，然后通过单击菜单外部关闭它。

问题是当您单击按钮，然后单击页面上的某个位置并向上滚动时，菜单不会显示。我相信这是因为我使用两个不同的事件来切换菜单 - 滚动和按钮点击它们相互冲突。所以我需要一些条件句来检查菜单的状态，但不能提出任何结果。请提出解决方案。

在这个小提琴http://jsfiddle.net/inliner/dpo8nyfe/4/中，您可以看到带有项目1-4的菜单。向下滚动页面，单击“显示菜单”，单击页面上的某个位置，向上滚动，菜单不可见。这就是问题所在。

$(".btn").click(function () {
  $(".home_body .main_head .main_nav").toggle();
});

$(window).bind('scroll', function() {
     if ($(window).scrollTop() > 91) {
         $('.main_head').addClass('fixed');
         $(".home_body .main_head .main_nav").hide();
     }
     else {
         $('.main_head').removeClass('fixed');
         $(".home_body .main_head .main_nav").show();
     }
});

Answer 1

检查这个小提琴：Fiddle

您发布的HTML中的代码与您在小提琴中的代码不同。首先需要确保在滚动时始终显示/隐藏菜单。你发布的代码似乎没那么好，所以重新添加到小提琴。接下来，您必须确保只有在＆gt;时才隐藏菜单。 91那就是你所遗漏的..继承人的代码：

var menu = $(".home_body .main_head .main_nav");
$('html').click(function (e) {
  if ($(e.target).attr('class') == 'btn') {
    menu.toggle();
  } else {
    if ($(window).scrollTop() > 91 && $(e.target).attr('class') != 'main_nav') {
        menu.hide();
    }
  }
});

$(window).bind('scroll', function () {
  if ($(window).scrollTop() > 91) {
    $('.main_head').addClass('fixed');
    menu.hide();
  } else {
    console.log('e')
    $('.main_head').removeClass('fixed');
    menu.show();
  }
});

还要确保使用（＆＃39;点击＆＃39;，功能....）而不是点击（）以获得更好的效果。

切换具有两个不同事件的元素

1 个答案: