0

我设置了以下 jQuery（版本 2.0.3）来切换触摸设备和桌面上的导航下拉菜单：

$(document).ready(function() {
    console.log("Ready handler triggered");
    $(document).on({ click : ToggleNav, touchstart : ToggleNav }, "#NavToggle");
});

我的ToggleNav()功能：

ToggleNav = function(event) {
    console.log(event.type);
    $('ul#Navigation').slideToggle(200);
    event.preventDefault();
}

以及相关的 HTML：

<div id='NavToggle'>Navigation</div>
<ul id='Navigation'>
    <li><a href='/' title='Home'>Home</a></li>
    <li><a href='/page-1.php' title='Page 1'>Page 1</a></li>
    <li><a href='/page-2.php' title='Page 2'>Page 2</a></li>
    <li><a href='/page-3.php' title='Page 3'>Page 3</a></li>
    <li><a href='/page-4.php' title='Page 4'>Page 4</a></li>
</ul>

这适用于我迄今为止测试过的所有浏览器（Mac、Windows 和 Chrome for Android），除了IE9，32位和 64 位版本。

有趣的是，如果我打开开发者工具并刷新页面，它将开始工作，然后我可以关闭开发者工具，无论我刷新多少次，它都会继续工作。也就是说，直到我关闭并重新打开浏览器。

已event.type成功记录到控制台（“LOG：click”），但 slideToggle() 显然没有被触发，并且没有错误被记录到控制台。

有没有人遇到过这种情况，并且知道原因和/或解决方案？

更新 1：我更新了ToggleNav()功能以提醒，event.type因为打开控制台查看日志也使 IE9 开始工作。IE9 甚至不会显示警报，因此 ToggleNav() 函数甚至没有被触发。

更新 2：经过更多测试，我认为问题出在原始的 on() 处理程序上。当我将console.log("Ready handler triggered");行改为 analert()时，它开始在 IE9 中工作。

4

3 回答 3

1

看起来您必须在.on事件处理程序中调用该函数。此外，您不需要委托的.on事件处理程序来工作，也不需要在event.preventDefault();这里使用，所以我删除了它：

function ToggleNav() {
    $('ul#Navigation').slideToggle(200);
}
$("#NavToggle").on({ 
    click : function() { 
        $("ul#Navigation").slideToggle(200); 
    }, touchstart : ToggleNav });

jsFiddle

此外，请确保该touchstart事件也正常工作。如果不执行与click事件在代码中执行的操作相同的操作。

于 2013-09-06T01:31:39.637 回答
0

以一些进一步的测试和挫败感结束了我的回答。显然在IE中“控制台对象只有在打开开发工具栏时才会激活。在此之前，调用控制台对象会导致它被报告为未定义。打开工具栏后，控制台将存在（即使工具栏随后关闭），因此您的控制台调用将起作用。”

请参阅： https ://stackoverflow.com/a/7742862/866273

因此console.log()，我的 ToggleNav 函数（原始问题）和 ready() 处理程序（更新 2）都导致了问题，这就是为什么当我切换console.log()到alert()（更新 1）时它开始工作的原因。

于 2013-09-07T00:08:58.947 回答
0

有时 IE8 和 IE9 与$jQuery 的行为出乎意料。jQuery在noconflict中使用为我解决了这个问题。

于 2013-09-06T01:31:58.760 回答