您的位置：首页 > Web前端 > JQuery

jQuery下拉导航及用position定层叠优先级

2013-12-29 00:10 211 查看

<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:在动画完成时执行的参数（即回调函数），可选

本文出自 “念若重洋” 博客，请务必保留此出处http://hg827.blog.51cto.com/6240602/1346255

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航