我的下拉菜单有问题。当我将鼠标悬停在链接上时,就可以了,但是,当我尝试将鼠标悬停在主下拉列表中时,它就可以了,并且不断地重复出现。我尝试使用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

最佳答案

Updated Fiddle

$(document).ready(function() {

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

);

});

关于jquery - jQuery下拉菜单上下滑动,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32736191/

10-11 23:32
查看更多