jquery - CSS/JQuery 建议 : Display hover over link and toggle div

Question

我有一个链接(水平导航栏元素)，当用户将鼠标悬停在它上面时，另一个 div 应该 slideDown 就在下面。 .toggle 不起作用，因为当您将鼠标悬停在链接上时它会不断切换 div。

我尝试使用 mouseover 和 mouseOut 编写我自己的代码，但它太敏感并且 div 在显示之间来回翻转( block ，没有)。

这是我的 jQuery:

    $(".topHorzNavLink").mouseover(function() {

    //get which link we hovered over
    var thisHorzLink = $(this).attr('linkItem');

    if (thisHorzLink == "link2") {

        $("#hoverContainer").slideDown('slow');

    }

});

$(".topHorzNavLink").mouseout(function() {

    //get which link we hovered over
    var thisHorzLink = $(this).attr('linkItem');

    if (thisHorzLink == "link2") {

        $("#hoverContainer").slideUp('slow');

    }

});

这是 HTML(我知道，呃，它在某些时候会是动态的):

<nav id="topHorzNav">

            <div id="topHorzNavLinks">

                <ul>
                    <li><p class="topHorzNavLink" linkItem="link1"><a href="#">Link 1</a></p></li>
                    <li><p class="topHorzNavLink" linkItem="link2"><a href="#">Link 2</a></p>
                <div id="hoverContainer">
                    <div class="colContainer">
                        <div class="colContainer">
                            <div class="colContainer">
                                <div class="colContainer">
                                    <div class="colContainer">

                                        <!--col 1-->
                                        <div class="col">
                                            <p class="colHeader">Heading 1</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                        </div>

                                        <div class="colDivider">&nbsp;</div>

                                        <!--col2 -->
                                        <div class="col">
                                            <p class="colHeader">Heading 2</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                        </div>

                                        <div class="colDivider">&nbsp;</div>

                                        <!--col3 -->
                                        <div class="col">
                                            <p class="colHeader">Heading 3</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                        </div>

                                        <div class="colDivider">&nbsp;</div>

                                        <!--col4 -->
                                        <div class="col">
                                            <p class="colHeader">Heading 4</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                        </div>

                                        <div class="colDivider">&nbsp;</div>

                                        <!--col5 -->
                                        <div class="col">
                                            <p class="colHeader">Heading 5</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                    </li>
                    <li><p class="topHorzNavLink"><a href="#" class="topHorzNavLink" linkItem="link3">Link 3</a></p></li>
                    <li><p class="topHorzNavLink"><a href="#" class="topHorzNavLink" linkItem="link4">Link 4</a></p></li>
                </ul>

            </div>

            <div id="topHorzNavRight">&nbsp;</div>

        </nav>
        <!--end top horz nav items-->

Answer 1

您需要使用 .stop() 函数清除排队的动画，否则每次你进出<li>将触发更多动画。另一个问题是您正在使用 mouseover() 这会触发动画即使指针位于子元素内也是如此。 mouseout()还会创建在指针离开子元素时冒泡的事件。你最好使用 .mouseenter() 和 .mouseleave() .

这里是 a demo使用 HTML5 和 jQuery 1.7.2。我不得不说你的例子非常冗长!

HTML

<nav>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a>
            <div>
                <!--col 1-->
                <section>
                    <header><h1>Heading 1</h1></header>
                    <article>
                        <p class="colText">Lorem Ipsum Dolar</p>
                        <p class="colText">Lorem Ipsum Dolar</p>
                    </article>
                </section>
                <!--col2 -->
                <section>
                    <header><h1>Heading 2</h1></header>
                    <article>
                        <p class="colText">Lorem Ipsum Dolar</p>
                        <p class="colText">Lorem Ipsum Dolar</p>
                    </article>
                </section>
                <section>
                    <header><h1>Heading 3</h1></header>
                    <article>
                        <p class="colText">Lorem Ipsum Dolar</p>
                        <p class="colText">Lorem Ipsum Dolar</p>
                    </article>
                </section>
                <section>
                    <header><h1>Heading 4</h1></header>
                    <article>
                        <p class="colText">Lorem Ipsum Dolar</p>
                        <p class="colText">Lorem Ipsum Dolar</p>
                    </article>
                </section>
                <section>
                    <header><h1>Heading 4</h1></header>
                    <article>
                        <p class="colText">Lorem Ipsum Dolar</p>
                        <p class="colText">Lorem Ipsum Dolar</p>
                    </article>
                </section>
            </div>
        </li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
    </ul>
</nav>​

CSS

ul {
    width:150px;
}
li {
    border:1px dashed lightgrey;
}
li > div {
    display:none;
}
h1 {
   font-size:14px;
}

​section {
    padding-bottom:8px;
    border-bottom:1px dashed lightblue;
}

JavaScript

$('li').on({
    mouseenter: function() {
        $(this).find('div:first').stop(true, true).slideDown('slow');
    },
    mouseleave: function() {
        $(this).find('div:first').stop(true, false).slideUp('slow');
    }
});​