javascript - 基础下拉关闭

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