溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
<DOTYPE html>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;list-style:none;}
body{font:12px/1.5 "宋體";}
#nav{width:300px;height:30px;margin:100px auto 10px;}
#nav li{width:100px;height:30px;line-height:30px;float:left;background:#ccc;text-align:center;position:relative;}
.hide{display:none;}
#cont{background:#ddd;margin:0 auto;width:400px;height:300px;}
</style>
<script type="text/javascript">
$(function(){
$("#nav li:has('ul')").hover(function(){ //選擇ul#nav下的li里包含ul的元素，并追加移動移出hover事件
$(this).children("ul").toggleClass("hide");//判斷當前元素的子元素是否包含hide類并切換
});
})
</script>
<html>
<body>
<ul id="nav">
<li>
<a href="">網頁設計</a>
<ul class="hide">
<li><a href="">網頁設計</a></li>
<li><a href="">網頁設計</a></li>
<li><a href="">網頁設計</a></li>
<li><a href="">網頁設計</a></li>
</ul>
</li>
<li>
<a href="">平面設計</a>
<ul class="hide">
<li>平面設計</li>
<li>平面設計</li>
<li>平面設計</li>
</ul>
</li>
<li>
<a href="">UI設計</a>
<ul class="hide">
<li>UI設計</li>
<li>UI設計</li>
<li>UI設計</li>
</ul>
</li>
</ul>
<div id="cont">下拉事件 下拉事件 下拉事件 下拉事件 下拉事件 下拉事件 下拉事件</div>
</body>
</html>1.此處的代碼是控制下拉菜單層顯示優先于div#cont層
position:relative;
2.此處的js可以改寫其他特效，讓頁面更加絢麗。例如，用show()、hide()。
關于jQuery show()的幾種特效簡述：
a. show()方法和hide()方法
$("selector").show() 從display:none還原元素默認或已設置的display屬性
$("selector").hide() 設置元素的display樣式為none，等于$("selector").css("display","none")
（注：傳入參數后，.show()和.hide()方法同時動畫改變元素的width,height和透明屬性；傳入參數控制顯隱速度，單位毫秒，如.show(600)，也可傳入fast,normal,slow，fast為200毫秒，normal為400毫秒，slow為600毫秒）
b. fadeIn()方法和fadeOut()方法
$("selector").fadeIn() 控制透明度在指定時間內從display:none提高至完全顯示
$("selector").fadeOut() 控制透明度在指定時間內降低至display:none;
c. slideUp()方法和slideDown()方法
$("selector").slideUp() 控制元素高度在指定時間內從下到上縮短至display:none;
$("selector").slideDown() 控制元素高度在指定時間內從display:none延伸至完整高度
d. 自定義動畫方法animate()
$("selector").animate(params,speed,callback); params:一個包含樣式屬性及值的映射，比如{property1:"value1",property2:"value2",...}
speed:速度參數，可選
callback:在動畫完成時執行的參數（即回調函數），可選
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
