如何使用slideToggle（）和持續時間？

我正在使用jQuery和反彈jQuery UI效果進行滑動菜單。問題是，當我將鼠標懸停在第一個li元素上時，懸停事件不會激活。這裏是我的JavaScript代碼：如何使用slideToggle（）和持續時間？

$(document).ready(function(){ 
    $("#topbar > ul > li:has(ul) > ul").hide().each(function(){ 
     var parent = $(this).parent(); 
     var height = parent.outerHeight(); 
     $(this).css({ 
      position: "absolute", 
      top: height, 
      zIndex: 1000 
     }); 
    }); 
    $("#topbar > ul > li:has(ul)").hover(function(){ 
     $("ul", this).slideDown(500, "easeOutBounce"); 
    }, function(){ 
     $("ul", this).slideUp(500, "easeOutBounce"); 
    }); 
});

這是我的HTML代碼：

<nav id="topbar"> 
    <ul> 
     <li><a href=""><i class="fa fa-plus"></i> New</a><ul><li>T</li><li>R</li></ul></li 
     ><li><a href="">View</a></li> 
    </ul> 
</nav>

我總是使用最新版本的jQuery的從jQuery的CDN（http://code.jquery.com/jquery.min.js）提供的，我使用的版本1.11。 4個jQuery UI。

編輯：代替.hover方法，我也試過如下：

$("#topbar > ul > li:has(ul)").on("mouseover mouseout", function(){ 
    $("ul", this).slideToggle(500, "easeOutBounce"); 
});

編輯：JSFiddle Here（舊的jsfiddle是錯誤的）

來源

2015-11-22 Jacques Marais

我建議你不要使用懸停，但mouseenter mouseleave。在jQuery中，懸停不再是有效的事件。這裏更多：https：//jquery.com/upgrade-guide/1.9/#quot-hover-quot-pseudo-event – Michelangelo

你可以創建jsFiddle鏈接 – balachandar

@Mikey ['.hover（）']（https：// api .jquery.com/hover /）仍然是一個有效的函數['.on（'hover'，.....）']（http://stackoverflow.com/questions/9827095/is-it-possible-to -use-jquery-on-and-hover）不再有效，這可能是你在想什麼 – DelightedD0D

你唯一真正的問題似乎是你試圖展示的UL背景是透明的。

像下面添加類的元素：

<ul class="drop"><li>T</li><li>R</li></ul>

然後添加下面的CSS規則：

.drop{ 
    background-color:#ccc; 
}

由於A.Wolf指出，改變你的代碼下面的會更好的表現，並使整個效果好一點安撫。

$(this).find("ul").stop().slideToggle(500, "easeOutBounce");

試試這個jsFiddle你會看到，該UI被顯示和隱藏懸停，並且該動畫是現在乾淨。

來源

2015-11-22 13:35:02 DelightedD0D

非常感謝！ –

@JacquesMarais您非常歡迎，您可能應該將佈局元素的高度/寬度調整爲容器大小的100％。我注意到它現在有點挑剔，因爲該區域非常小，編碼很快，編碼很快 – DelightedD0D

@ DelightedD0D你不需要傳遞任何空的回調，這是完全有效的：'.slideToggle（500，「easeOutBounce」）;' –

如何使用slideToggle（）和持續時間？

回答

相關問題