溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1.顯示效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>特殊效果</title>
<script type="text/javascript" src="../jQuery庫/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('#btn').click(function(){
/*fadeOut(時間，函數)*/
/*$('.div1').fadeOut(1000);*/
/*fadeToggle淡出淡入*/
/*$('.div1').fadeToggle(1000);*/
/*toggle()切換元素可視狀態*/
/*$('.div1').toggle(1000);*/
/*hide()隱藏*/
/*$('.div1').hide(1000);*/
/*show()顯示元素*/
/*$('.div1').show(1000);*/
/*slideDown()向下展開*/
/*$('.div1').slideDown(1000);*/
/*slideUp()向上卷起*/
/*$('.div1').slideUp(1000);*/
/*slideToggle()向下向上反復*/
$('.div1').slideToggle(1000);
})
})
</script><style type="text/css">
.div1{
width: 300px;
height: 300px;
background-color: antiquewhite;
}
</style></head>
<body>
<input type="button" value="效果" id="btn">
<div class="div1"></div></body>
</html>
2.鏈式調用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>層級菜單</title>
<script type="text/javascript" src="../jQuery庫/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('.level1').click(function(){
/*點擊a,next()就是ul,stop()修正反復點擊，向上向下伸展，父級li,siblings()其他同級li，ul子元素，升起*/
$(this).next().stop().slideToggle().parent().siblings().children('ul').slideUp();
})
})
</script><style type="text/css">
.menu{
width: 100px;
background-color: aqua;
list-style: none;
padding: 0;
margin: 50px auto 0;
}
.menu li{
border-bottom: 1px solid #fff;
}
.menu li a{
text-decoration: none;
color: #8820AF;
}
.menu li ul{
background-color: #DDD4D5;
list-style: none;
padding: 0;
text-align: center;
}
.menu li ul li:hover{
background-color: antiquewhite;
}
</style></head>
<body>
<ul class="menu">
<li>
<a href="#" class="level1">勇士</a>
<ul class="first">
<li><a href="">杜蘭特</a></li>
<li><a href="">庫里</a></li>
<li><a href="">湯普森</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">火箭</a>
<ul>
<li><a href="">哈登</a></li>
<li><a href="">保羅</a></li>
<li><a href="">餅皇</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">湖人</a>
<ul>
<li><a href="">詹姆斯</a></li>
<li><a href="">球哥</a></li>
<li><a href="">鶯歌</a></li>
</ul>
</li>
</ul></body>
</html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
