Question

jQuery的新手，我设法让我的菜单项在悬停时下拉，但一旦它们停止，它们就会停留下来。当我没有徘徊在物品上时，如何让它重新隐藏？谢谢你提前。

<script type="text/javascript"> 
$(document).ready(function(){
    $(".downservices").hover(function(){
        $(".servicesdropped").slideDown("fast");



    });
});
</script>

----菜单-----

<ul>
        <li><a href="/">Home</a></li>
        <li><a href="/buy-ads">Buy Ads</a></li>
        <li class="downservices"><a href="#">Categories</a></li>
    <div class="servicesdropped">
    <ul class="middle">

        <li><a href="#">Arts & Entertainment</a></li>                                          
<li><a href="#">Automotive</a></li> 
<li><a href="#">Business &amp; Services</a></li>                                  
<li><a href="#">Community & Social</a></li> 
<li><a href="#">Construction & Contractors</a></li>                                 
<li><a href="#">Designing</a></li> 
<li><a href="#">Electronics</a></li>                        
<li><a href="#">Education</a></li>   
<li><a href="#">Finance</a></li>                                                 
<li><a href="#">Food & Dining</a></li> 
<li><a href="#">Government & legal</a></li>                                               



    </ul>
    <ul class="middle">
    <li><a href="#">Health & Fitness</a></li> 
<li><a href="#">Home & Garden</a></li>                                                
<li><a href="#">Industry & Agriculture</a></li> 
<li><a href="#">Media & Communications</a></li> 
    <li><a href="#">Medical & Medicine</a></li> 
<li><a href="#">Personal Care & Services</a></li>                                      
<li><a href="#">Real Estate</a></li> 
<li><a href="#">Shopping</a></li>                              
<li><a href="#">Sports & Recreation Activities</a></li> 
<li><a href="#">Travel</a></li>   





    </ul>

    </div>

    <li class="downservices2"><a href="#">Quick Links</a></li>
    <div class="servicesdropped2">

    <ul class="middle">
    <li><a href="#">Attorneys defense</a></li>
<li><a href="#">Banks</a></li>
<li><a href="#">Broadcasting</a></li>
<li><a href="#">Charity & networking</a></li>
<li><a href="#">Clubs</a></li>
<li><a href="#">Corporate</a></li>
<li><a href="#">Cosmetics</a></li>
<li><a href="#">Educational services</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Home & building services</a></li>
<li><a href="#">Imports and exports</a></li>
    </ul>


    <ul class="middle">
    <li><a href="#">Improvement & supplies</a></li>
<li><a href="#">Investments and rentals</a></li>
<li><a href="#">Life style design</a></li>
<li><a href="#">Manufacture & dealers</a></li>
<li><a href="#">Name Brands</a></li>
<li><a href="#">Physicians & medical centers</a></li>
<li><a href="#">Restaurants</a></li>
<li><a href="#">Sports clubs</a></li>
<li><a href="#">Tv's & computers</a></li>
<li><a href="#">Vacation</a></li>
    </ul>

    </div>

        <li><a href="/faq">Faq</a></li>

        <li><a href="/contact">Contact Us</a></li>
    </ul>

Answer 1

Hover可以接受两个处理程序函数，一个用于mouseenter，另一个用于mouseleave只需添加handlerOut函数，就像这样，

<强> Live Demo

$(".downservices").hover(
        function(){$(".servicesdropped").slideDown("fast");},
        function(){$(".servicesdropped").slideUp("fast");}
);

已更新当子项不是直接子项时。

<强> Live Demo 2

$(".servicesdropped").bind('mouseleave', function(){$(this).slideUp("fast");});

$(".downservices").mouseover(
        function(){$(".servicesdropped").slideDown("fast");}
);

<强> Hover Reference

Answer 2

您需要完成signature hover( handlerIn(eventObject), handlerOut(eventObject) )在.slideUp()

中为handerOut()添加一个函数

<script type="text/javascript"> 
$(document).ready(function(){
    $(".downservices").hover(
        function(){ $(".servicesdropped").slideDown("fast");}
        function(){ $(".servicesdropped").slideUp("fast");}
    );
});
</script>

Answer 3

试

$(document).ready(function(){
    $(".downservices").toggle(function(){
        $(".servicesdropped").slideDown("fast");
    });
});

OR

$(document).ready(function(){
    $(".downservices").hover(function(){
        $(".servicesdropped").slideDown("fast");
    }, function(){
        $(".servicesdropped").slideUp("fast"););
});

可能slideToggle()也可以帮助你：）

Answer 4

Hover同时具有输入和输出回调功能。试一试

$(".downservices").hover(
    function(){ $(".servicesdropped").slideDown("fast"); },
    function(){ $(".servicesdropped").slideUp("fast"); },
});

jQuery下拉菜单项在不悬停时返回

4 个答案: