Question

当您点击我的列表菜单一次后，它会展开，但如果再次点击它，它就不会收缩。

问题是listsExpanded在false true之后被listsExpand()正确设置后，会被莫名其妙地重置为$('#mid-wrap').delegate()。这导致listsExpand()内的检查不恰当地再次呼叫listsContract()，而不是{{1}}。

我无法弄清楚这种重置发生的位置或原因，但我认为它与粘性浅蓝色菜单功能有关。在我滚动到fix an IE7 bug后开始删除并替换此蓝色条之前，小白菜单的扩展/收缩没有问题。

关于导致这种情况的任何想法？

Answer 1

问题是hover事件与.delegate()一起使用时不支持两个函数参数（输入和输出）。您需要使用mouseenter和mouseleave代替hover。

更改为：

$('#mid-wrap').delegate('#lists', 'mouseenter', function() {
    listsMouseIn = true;
}).delegate('#lists', 'mouseleave', function() {
    listsMouseIn = false;
});

仅供参考，如果这些HTML对象是静态的，而不是动态添加的，则可以通过在实际对象上使用直接事件处理程序而不是.delegate来显着简化代码，并在处理单击时使用stopPropagation（）。然后，您会在对象中看到第一个点击，并且不会多次处理相同的点击，导致您需要所有这些全局标记来跟踪状态。

您也可以使用对象的可见性作为检测机制，以确定菜单是打开/关闭而不是全局变量。

Answer 2

你的悬停处理程序的第一部分（listsMouseIn = true;）从未实际触发，所以每当你点击时，你的$('body').mouseUp()处理程序都假定你没有悬停列表按钮，因此隐藏菜单只是为了$('#mid-wrap').delegate(...)处理程序，以便在几毫秒后再次显示它。

更换

$('#mid-wrap').delegate('ul#lists', 'hover', funcIn, funcOut);

与

$('#mid-wrap').delegate('ul#lists', 'mouseover', funcIn).
               delegate('ul#lists', 'mouseout', funcOut);

似乎可以解决问题。

JavaScript / jQuery：全局变量莫名其妙地被重置，导致菜单收缩问题

2 个答案: