悬停太快时如何避免子菜单混合？

Question

我有这个HTML代码：

<ul class="navigation-links">
                    <li class="link-item">
                        <img src="images/new-menu/menu-item_04.png" width="150" height="41" alt="" />
                        <div style="display: none" class="sub-menu">
                            <div class="sub-col">
                                <img src="images/new-menu/home.png" width="46" height="14" alt="" />
                                <ul>
                                    <li>item</li>
                                    <li>item</li>
                                    <li>item</li>
                                    <li>item</li>
                                    <li>item</li>
                                    <li>item</li>
                                </ul>
                            </div>
                            <div class="sub-col">
                                <img src="images/new-menu/home.png" width="46" height="14" alt="" />
                                <ul>
                                     <li>item</li>
                                    <li>item</li>
                                    <li>item</li>
                                    <li>item</li>
                                </ul>
                            </div>
                            <div class="sub-col">
                                <img src="images/new-menu/sataer.png" width="124" height="17" alt="" />
                                <ul>
                                    <li>item</li>
                                    <li>item</li>
                                    <li>item</li>
                                    <li>item</li>
                              </ul>
                          </div>
                            <div class="clear"></div>
                        </div>
                    </li>
                    <li class="link-item">
                        <img src="images/new-menu/menu-item_03.png" width="154" height="41" alt="" />
                        <div style="display:none" class="sub-menu index-menu-col2">
                            <div class="sub-col">
                                <img src="images/new-menu/decor.png" width="53" height="15" alt="" />
                                <ul>
                                  <li>item</li>
                                    <li>item</li>
                                    <li>item</li>
                                    <li>item</li>
                                    <li>item</li>
                                    <li>item</li>
                                    <li>item</li>
                                    <li>item</li>
                              </ul>
                          </div>
                            <div class="sub-col">
                                <img src="images/new-menu/acc.png" width="94" height="15" alt="" />
                                <ul>
                                  <li>item</li>
                                    <li>item</li>
                                    <li>item</li>
                                    <li>item</li>
                                    <li>item</li>
                                    <li>item</li>
                              </ul>
                          </div>
                            <div class="sub-col">
                                <img src="images/new-menu/out-decor.png" width="120" height="17" alt="" />
                                <ul>
                                    <li>item</li>
                                    <li>item</li>
                                    <li>item</li>
                                    <li>item</li>
                              </ul>
                          </div>
                            <div class="clear"></div>
                        </div>
                    </li>
                    <li class="link-item">
                        <img src="images/new-menu/menu-item_02.png" width="152" height="41" alt="" />
                        <div style="display: none" class="sub-menu index-menu-col3">
                            <div class="sub-col">
                                <img src="images/new-menu/lighting.png" width="35" height="16" alt="" />
                                <ul>
                                  <li>item</li>
                                    <li>item</li>
                                    <li>item</li>
                                    <li>item</li>
                              </ul>
                          </div>
                            <div class="sub-col">
                                <img src="images/new-menu/electric.png" width="106" height="19" alt="" />
                                <ul>
                                    <li>item</li>
                                    <li>item</li>
                                    <li>item</li>
                                    <li>item</li>
                                    <li>item</li>
                                    <li>item</li>
                                    <li>item</li>
                              </ul>
                          </div>
                          <div class="clear"></div>
                        </div>
                    </li>
                    <li class="link-item"><img src="images/new-menu/menu-item_01.png" width="151" height="41" alt="" /></li>
                </ul>

和这个JavaScript代码：

$(document).ready(function(e) {
$(".link-item").hover(function(e) {
    $(this).children(".sub-menu").slideDown("slow");
});
$(".link-item").mouseleave(function(e) {
    $(this).children(".sub-menu").slideUp("fast");
});

}）;

此菜单工作正常，但在菜单栏上悬停太快时，每个菜单都会快速显示并消失，看起来非常难看。

我认为解决方案是停止向下滑动事件，直到所有上滑事件停止，但我不知道该怎么做。

如果还有其他解决方案，我已准备好尝试了。

Demo Website

Answer 1

看看hoverIntent。它确实有一些逻辑来确保你的悬停看起来是有意的，比如放慢项目的速度等等。

Answer 2

我修改了你的代码。试试这个：

$(document).ready(function(e) {
$(".link-item").hover(function(e) {
    $(this).children(".sub-menu").stop(true,false).slideDown("slow");
});
$(".link-item").mouseleave(function(e) {
    $(this).children(".sub-menu").stop(true,false).slideUp("fast");
});

});