Question

我的下拉菜单有问题。当我将鼠标悬停在链接上时，它会停止运行，但是当我尝试将主链路中的任何链接悬停时，它会上升，并且会不断重复。我尝试使用stop（true，true）修复此问题，但问题仍然存在。如果有人知道如何解决这个问题？

HTML代码：

<div class="navigation">
    <ul>
        <li class="first"><a href="#">Home</a></li>
        <li><a href="#">Women</a></li>
        <li class="dropdown-container">
        <a href="#" class="fading">Men</a>
            <div class="main-dropdown">
                <div class="dropdown-cols">
                    <div class="dropdown-col">
                    <a href="#" class="category-headline">Featured</a>
                        <ul>
                            <li><a href="#">New Arrivals</a></li>
                            <li><a href="#">Best sellers</a></li>
                            <li><a href="#">Sale</a></li>                                       
                        </ul>
                    </div> <!--  end /.dropdown-col  -->
                    <div class="dropdown-col">
                    <a href="#" class="category-headline">Categories</a>
                        <ul>
                            <li><a href="#">All Clothing</a></li>
                            <li><a href="#">Accessories</a></li>
                            <li><a href="#">Basics</a></li>
                            <li><a href="#">Dresses</a></li>
                            <li><a href="#">Jackets</a></li>
                            <li><a href="#">Jeans</a></li>
                            <li><a href="#">Pants</a></li>
                            <li><a href="#">Shirts</a></li>
                            <li><a href="#">Sweaters</a></li>
                        </ul>
                    </div> <!--  end /.dropdown-col  -->
                    <div class="dropdown-col">
                    <a href="#" class="category-headline">Lookbooks</a>
                        <ul>
                            <li><a href="#">Spring 2014</a></li>
                            <li><a href="#">Summer 2014</a></li>
                        </ul>
                    </div> <!--  end /.dropdown-col  -->
                </div> <!--  end /.dropdown-cols  -->
                <div class="featured-add">
                    <h1>Top Sale</h1>
                    <img src="images/featured-img.jpg" alt="featured" class="featured-image" />
                </div> <!--  end /.featured-add  -->
            </div> <!--  end /.main-dropdown  -->
        </li> <!--  end /.dropdown-container -->
        <li><a href="#">Experience</a></li>
    </ul>
</div> <!--  end /.navigation  -->

Javascript代码：

$(document).ready(function() { 

$( '.dropdown-container a.fading' ).hover(
        function(){
            $('.main-dropdown').stop(true, true).slideDown(200);
        },
        function(){
            $('.main-dropdown').stop(true, true).slideUp(200);
        }
    );

});

CSS代码：

.navigation {
    position: relative;
    margin: 0 auto;
    width: 1080px;
    text-align: center;
    z-index: 97;
}

.navigation ul {
    list-style-type: none;
    list-style-image: none;
    overflow: hidden;
    text-align: center;
    margin: 0 auto;
}

.navigation ul li.first a{
    display: block;
    background: url(../images/icons/home-icon.png) no-repeat bottom;
    width: 27px;
    height: 30px;
    text-indent: -99999px;
    line-height: 40px;
}

.navigation  > ul li {
    display: inline-block;
    margin: 0;
    line-height: 1em;
}

.navigation  > ul li.dropdown-container:hover > a {
    background: url(../images/icons/dropdown-arrow.png) no-repeat bottom center;
}

.navigation  > ul li.dropdown-container:hover > div.main-dropdown {
    display: block;
}

.navigation  > ul > li > a {
    display: block;
    position: relative;
    margin: 0 35px;
    height: 60px;  
    font-size: 18px;
    color: #002d47;
    line-height: 60px;
    text-decoration: none;
    z-index: 9999;
}

.navigation  > ul li:first-child a {
    margin-left: 0;
}

.main-dropdown {
    display: none;
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, -0);
    transform: translate(-50%, 0);
    overflow: hidden;
    padding: 20px;
    top: 60px;
    width: 1000px;
    background: #fff;
    border: 1px solid #d5d5d5; 
    z-index: 9998;
}

.dropdown-cols {
    float: left;
    margin-left: -20px;
    padding-right: 20px;
    width: 600px;
}

.dropdown-col {
    float: left;
    margin-left: 20px;
    width: 180px;
}

.navigation ul li a.category-headline {
    display: block;
    padding: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    background: #002d47;
}

.navigation  ul li .dropdown-col ul {
    padding: 0 0 15px;
}

.navigation  ul li .dropdown-col ul li {
    float: none; 
    display: block;
}

.navigation  ul li .dropdown-col ul li a {
    display: block;
    padding: 0;
    padding-left: 10px;
    width: 100%;
    height: auto;
    font-size: 14px;
    line-height: 30px;
    color: #363636;
    text-decoration: none;
}

.navigation  ul li .dropdown-col ul li a:hover {
    background: rgba(0, 45, 71, 0.5);
}

.featured-add {
    float: left;
    padding-left: 20px;
    width: 300px;
}

.featured-add img.featured-image {
    margin-bottom: 25px;
    width: 100%;
}

.featured-add h1 {
    font-size: 19px;
    font-weight: bolder;
    text-transform: uppercase;
    color: #002d47;
    margin-bottom: 25px;
    text-align: left;
}

这是jsfiddle，可以确切地看到问题所在。

Demo

Answer 1

请参阅Updated Fiddle

$(document).ready(function() { 

$( '.dropdown-container a.fading' ).hover(
    function(){
        $('.main-dropdown').stop(true, true).slideDown(200);
    },

);

});

Answer 2

请尝试这个：

$(document).ready(function() { 

    $( '.dropdown-container a.fading' ).hover(
            function(){
                $('.main-dropdown').stop(true, true).slideDown(200);
            },
            function(){
                $('.main-dropdown').stop(true, true).slideUp(200);
                return:false;
            }
        );

    });

DEMO

Answer 3

将事件绑定到父li。

<强> DEMO

$('.dropdown-container a.fading').closest('li').hover(function () {
    $('.main-dropdown').stop(true, true).slideDown(200);
}, function () {
    $('.main-dropdown').stop(true, true).slideUp(200);
});

Answer 4

你可以用css

来做

.navigation > ul li .main-dropdown{
    display:none;
}
.navigation > ul li:hover .main-dropdown{
    display:block;
}

Demo

Answer 5

更新了您的fiddle

仅修改了一行

$( '.dropdown-container').hover(
  // function
);

jQuery下拉菜单向下滑动

5 个答案: