Question

我正在使用jQuery Foundation Top Bar 2.0.1

重现步骤： 1.将鼠标悬停在菜单项上 2.下拉打开，移动鼠标下拉 3.鼠标鼠标关闭下拉

IE中的行为：下拉关闭

Chrome / Firefox中的行为：下拉保持打开状态

以下是菜单HTML的样子：

<nav class="top-bar">
                        <section class="top-bar-section">
                            <ul>
                                <li class="headerItem"><a href="#">Home</a></li>

                                <li class="has-dropdown headerItem">
                                    <a href="#">Engine Product</a>
                                    <ul class="dropdown">
                                        <li><a href="#">Perkins Engines</a></li>
                                        <li><a href="#">Isuzu Engines</a></li>
                                        <li><a href="#">FPT PowerTrain</a></li>
                                        <li><a href="#">ISS Engines</a></li>
                                        <li><a href="#">Mitsubishi Engines</a></li>
                                    </ul>
                                </li>
                             </ul>
                       </section>
                </nav>

查看foundation.topbar.js，看起来这是控制何时从菜单项中添加/删除悬停css类的函数

.on('mouseenter mouseleave', '.top-bar li', function (e) {
          if (!self.settings.is_hover) return;

          if (/enter|over/i.test(e.type)) {
            $(this).addClass('hover');
          } else {
            $(this).removeClass('hover');
          }
        })

我添加了一个快速记录声明来查看正在发生的事情

console.log('target: ' + e.target.innerHTML + ' event: ' + e.type);

在IE中：

 target: Engine Product event: mouseenter 
 target: Perkins Engines event: mouseenter 
 target: Perkins Engines event: mouseleave 
 target: Perkins Engines event: mouseleave

在Chrome / Firefox中

 target: Engine Product event: mouseenter 
 target: Perkins Engines event: mouseenter 
 target: Perkins Engines event: mouseleave

我不确定该如何处理

Answer 1

原来zepto mouseleave事件是错误的。

我的解决方案解决方案：只使用Jquery

基金会下拉关闭

1 个答案: