CSS / JQuery建议：显示悬停在链接上并切换div

时间：2021-05-31 22:22:02

I have a link (horizontal nav bar item) and when the user hovers over it another div should slideDown just below. .toggle doesn't work as it continuously toggles the div when you are hovering over the link.

我有一个链接(水平导航栏项),当用户将鼠标悬停在它上面时,另一个div应该在下方滑动。 .toggle无法正常工作,因为当您将鼠标悬停在链接上时,它会不断切换div。

I tried to write my own using mouseover and mouseOut but it's too sensitive and the div flips back and forth between displays (block, none).

我尝试使用mouseover和mouseOut编写自己的,但它太敏感了,div在显示之间来回翻转(块,无)。

Here's my jQuery:

这是我的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');

    }

});

Here's the HTML (I know, ugh, it will be dynamic at some point):

这是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-->

2 个解决方案

#1

1  

You need to use the .stop() function to clear the queued animations otherwise every time you move in and out of the <li> more animations will be triggered. The other problem is that you are using mouseover() which is triggering the animation even when the pointer is inside the child elements. mouseout() also creates events that bubble up when the pointer leaves child elements. You are better off using .mouseenter() and .mouseleave().

您需要使用.stop()函数来清除排队的动画,否则每次进出

  • 时都会触发更多动画。另一个问题是你正在使用mouseover(),即使指针位于子元素内部也会触发动画。 mouseout()还会创建在指针离开子元素时冒泡的事件。你最好使用.mouseenter()和.mouseleave()。

    • Here is a demo using HTML5 and jQuery 1.7.2. I have to say your example is very verbose!

    这是一个使用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');
    }
});​

    #2

    0  

    You'd better use the hover() function. It has two parameters, each one is a function. The first one is for the mouseover event, the second is for the mouseout event.

    你最好使用hover()函数。它有两个参数,每个参数都是一个函数。第一个用于mouseover事件,第二个用于mouseout事件。

    I tried the following code and it worked:

    我尝试了以下代码并且它有效:

    $(function() {  
$('#nav-list>li').hover(function(e) {
    $(this).children('ul').slideDown(300);
}, function(e) {
    $(this).children('ul').slideUp(200);
});
});

    #1

    1  

    You need to use the .stop() function to clear the queued animations otherwise every time you move in and out of the <li> more animations will be triggered. The other problem is that you are using mouseover() which is triggering the animation even when the pointer is inside the child elements. mouseout() also creates events that bubble up when the pointer leaves child elements. You are better off using .mouseenter() and .mouseleave().

    您需要使用.stop()函数来清除排队的动画,否则每次进出

  • 时都会触发更多动画。另一个问题是你正在使用mouseover(),即使指针位于子元素内部也会触发动画。 mouseout()还会创建在指针离开子元素时冒泡的事件。你最好使用.mouseenter()和.mouseleave()。

    • Here is a demo using HTML5 and jQuery 1.7.2. I have to say your example is very verbose!

    这是一个使用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');
    }
});​

    #2

    0  

    You'd better use the hover() function. It has two parameters, each one is a function. The first one is for the mouseover event, the second is for the mouseout event.

    你最好使用hover()函数。它有两个参数,每个参数都是一个函数。第一个用于mouseover事件,第二个用于mouseout事件。

    I tried the following code and it worked:

    我尝试了以下代码并且它有效:

    $(function() {  
$('#nav-list>li').hover(function(e) {
    $(this).children('ul').slideDown(300);
}, function(e) {
    $(this).children('ul').slideUp(200);
});
});
    标签：

    相关文章