利⽤jquery控制display属性变化我想实现的效果是，点击⼀个区域，另⼀个区域出现或者消失，我的布局如下：
<div class="header">
<div class="logo">
<img src="img/logo.jpg" alt="" height="80" />
</div>
<a class="nav">
控制display属性管理
<span></span>
</a>
</div>
<div class="subNav clear">
<ul>
<li><a href="#">控制块1</a></li>
<li><a href="#">控制块2</a></li>
<li><a href="#">控制块3</a></li>
<li><a href="#">控制块4</a></li>
<li><a href="#">控制块5</a></li>
</ul>
</div>
效果如图所⽰：
以上的“控制display属性管理”后的三⾓形是⽤CSS制作出来的，代码如下：
width:0;
height:0;
overflow:hidden;
border-left:6px solid transparent;
border-right:6px solid transparent;
border-top:6px solid #118a11;
下⾯罗列下各种朝向的三⾓形绘制⽅法：
overflow:hidden;
/*朝上的三⾓形*/
border-left:6px solid transparent;
border-right:6px solid transparent;
border-bottom:6px solid #118a11;
/*朝下的三⾓形*/
border-left:6px solid transparent;
border-right:6px solid transparent;
border-top:6px solid #118a11;
/*朝左的三⾓形*/
border-right:6px solid #118a11;
border-top:6px solid transparent;
border-bottom:6px solid transparent;
/*朝右的三⾓形*/
border-left:6px solid #118a11;
border-top:6px solid transparent;
border-bottom:6px solid transparent;
想⽤jquery实现的效果是点击“控制display属性管理”后下⽅导航栏出现或隐藏：
<script type="text/javascript">
$(function(){
$(".nav").click(function(){
var show = $('.subNav').css('display');
if ( show == 'block')
{
$('.subNav').css('display','none');
}
if ( show == 'none')
{
$('.subNav').css('display','block');
}
});
});
</script>
通过nav的点击来触发事件，通过$('.subNav').css('display')；来获取subNav的display属性值，并根据属性值，给subNav添加新的属性值，从⽽达到隐藏出现的效果。
那么通过jquery来控制display属性已做完，后来⼜尝试了另⼀种效果，就是当点击导航栏中的a标签时，改变header中的值，代码如下：
$(".subNav a").click(function(){
var content = $(this).text();
var triangle = '<span></span>';
$('.nav').html(content + triangle );
$('.subNav').css('display','none');
});
查subNav下a标签是否有触发点击效果，若有则获取当前点击效果的text值，并将这个值赋给nav的text值，并将subNav收起，但发现这样做会使三⾓形消失，所以选择将值给nav的html值，并将三⾓形的代码同时赋给它，这样就可以实现，header中的值可以根据a标签不同的点击从⽽改变字的效果。
完成了以上这些之后，我⼜在想能否⽤transition来增添动态效果，就有了以下代码
height:60px;
background:#c9d82e;
transition:1s;
}
/*控制⾼度*/
var show = $('.subNav').height();
if ( show == '60')
{
$('.subNav ul').css('display','none');
$('.subNav').css('height','0');
}
if ( show == '0')
{
$('.subNav').css('height','60px');
position标签属性$('.subNav ul').css('display','block');
}
这样利⽤控制subNav的⾼度从0到60的变化，来⽤transition达到效果，但很纠结的是外层的div有动态的收起效果，但是字体却不跟随变化，所以就⽤了隐藏ul的⽅法，效果有点差，但将就下，有空在研究是哪⾥出的问题。
当然在使⽤jquery时，别忘了引⼊<script src="js/jquery-1.4.3.min.js" type="text/javascript"></script>
总体代码如下所⽰：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>⽆标题⽂档</title>
<script src="js/jquery-1.4.3.min.js" type="text/javascript"></script>
<style type="text/css">
/*reset*/
body,ul { padding:0; margin:0; }
li { list-style:none; }
.header {
position:relative;
width:100%;
height:90px;
padding-top:10px;
background:#f4f9bf;
}
.header .logo {
float:left;
width:80px;
height:80px;
margin-left:100px;
border-radius:50px;
overflow:hidden;
}
.header .nav {
position:relative;
display:block;
float:left;
height:80px;
width:200px;
margin-left:50px;
line-height:80px;
line-height:80px;
font-size:16px;
color:green;
cursor:pointer;
}
.
nav span {
display:block;
position:absolute;
top:45%;
right:0;
width:0;
height:0;
overflow:hidden;
/*朝下的三⾓形*/
border-left:6px solid transparent;
border-right:6px solid transparent;
border-top:6px solid #118a11;
}
.subNav {
width:100%;
height:60px;
background:#c9d82e;
transition:1s;
}
.subNav ul {
width:1000px;
height:60px;
margin:0 auto;
}
.subNav ul li {
float:left;
margin:10px 20px;
}
.subNav a {
display:block;
padding:0 50px;
height:40px;
line-height:40px;
font-size:16px;
color:#057505;
text-decoration:none;
}
.subNav a:hover {
background:#f4f9bf;
border-radius:10px;
}
.clear { zoom:1; }
.clear:after { content:''; display:block; clear:both; }
</style>
<script type="text/javascript">
$(function(){
$(".nav").click(function(){
/*控制display属性*/
/* var show = $('.subNav').css('display');
if ( show == 'block')
{
$('.subNav').css('display','none');
}
if ( show == 'none')
{
$('.subNav').css('display','block');
}
*/
*/
/*控制⾼度*/
var show = $('.subNav').height();
if ( show == '60')
{
$('.subNav ul').css('display','none');
$('.subNav').css('height','0');
}
if ( show == '0')
{
$('.subNav').css('height','60px');
$('.subNav ul').css('display','block');
}
});
$(".subNav a").click(function(){
var content = $(this).text();
var active = $('.nav').text();
var triangle = '<span></span>';
$('.nav').html(content + triangle );
$('.subNav').css('display','none');
});
});
</script>
</head>
<body>
<div class="header">
<div class="logo">
<img src="img/logo.jpg" alt="" height="80" /> </div>
<a class="nav">
控制display属性管理
<span></span>
</a>
</div>
<div class="subNav clear">
<ul>
<li><a href="#">控制块1</a></li>
<li><a href="#">控制块2</a></li>
<li><a href="#">控制块3</a></li>
<li><a href="#">控制块4</a></li>
<li><a href="#">控制块5</a></li>
</ul>
</div>
</body>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论