溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

jQuery下拉導(dǎo)航及用position定層疊優(yōu)先級

發(fā)布時間：2020-06-07 00:49:31 來源：網(wǎng)絡(luò) 閱讀：403 作者：歸虛無道 欄目：web開發(fā) 
<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");//判斷當(dāng)前元素的子元素是否包含hide類并切換
    });
})
</script>
<html>
<body>
<ul id="nav">
    <li>
        <a href="">網(wǎng)頁設(shè)計</a>
        <ul class="hide">
            <li><a href="">網(wǎng)頁設(shè)計</a></li>
            <li><a href="">網(wǎng)頁設(shè)計</a></li>
            <li><a href="">網(wǎng)頁設(shè)計</a></li>
            <li><a href="">網(wǎng)頁設(shè)計</a></li>
        </ul>
    </li>
    <li>
        <a href="">平面設(shè)計</a>
        <ul class="hide">
            <li>平面設(shè)計</li>
            <li>平面設(shè)計</li>
            <li>平面設(shè)計</li>
        </ul>
    </li>
    <li>
        <a href="">UI設(shè)計</a>
        <ul class="hide">
            <li>UI設(shè)計</li>
            <li>UI設(shè)計</li>
            <li>UI設(shè)計</li>
        </ul>
    </li>
</ul>
<div id="cont">下拉事件 下拉事件 下拉事件 下拉事件 下拉事件 下拉事件 下拉事件</div>
</body>
</html>

1.此處的代碼是控制下拉菜單層顯示優(yōu)先于div#cont層

position:relative;

2.此處的js可以改寫其他特效，讓頁面更加絢麗。例如，用show()、hide()。

關(guān)于jQuery show()的幾種特效簡述：

a. show()方法和hide()方法


$("selector").show()

從display:none還原元素默認(rèn)或已設(shè)置的display屬性

$("selector").hide()

設(shè)置元素的display樣式為none，等于$("selector").css("display","none")
（注：傳入?yún)?shù)后，.show()和.hide()方法同時動畫改變元素的width,height和透明屬性；傳入?yún)?shù)控制顯隱速度，單位毫秒，如.show(600)，也可傳入fast,normal,slow，fast為200毫秒，normal為400毫秒，slow為600毫秒）


b. fadeIn()方法和fadeOut()方法


$("selector").fadeIn()

控制透明度在指定時間內(nèi)從display:none提高至完全顯示

$("selector").fadeOut()

控制透明度在指定時間內(nèi)降低至display:none;


c. slideUp()方法和slideDown()方法

$("selector").slideUp()

控制元素高度在指定時間內(nèi)從下到上縮短至display:none;

$("selector").slideDown()

控制元素高度在指定時間內(nèi)從display:none延伸至完整高度


d. 自定義動畫方法animate()

$("selector").animate(params,speed,callback);

params:一個包含樣式屬性及值的映射，比如{property1:"value1",property2:"value2",...}
speed:速度參數(shù)，可選
callback:在動畫完成時執(zhí)行的參數(shù)（即回調(diào)函數(shù)），可選


向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手