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

利用jquery控制display属性变化

2016-10-20 16:04 525 查看

我想实现的效果是，点击一个区域，另一个区域出现或者消失，我的布局如下：

<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;

下面罗列下各种朝向的三角形绘制方法：

width:0;
height:0;
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来增添动态效果，就有了以下代码

.subNav {
width:100%;
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');
$('.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;
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>

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

标签：

相关文章推荐

新的分享

章节导航