利用jquery控制display属性变化

最新推荐文章于 2024-06-09 18:26:29 发布
置顶 最新推荐文章于 2024-06-09 18:26:29 发布
阅读量4.1w 收藏 8
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/had_meno/article/details/52873592
版权

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

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



had_meno
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery设置display属性_jQuery 切换效果方法
weixin_39625782的博客
01-28 1618
好好学习，天天向上本章主要内容是：显示和隐藏方法 hide() 和 show() 方法、滑动显示隐藏 slideDown() 和 slideUp() 方法、淡入淡出 fadeIn() 和 fadeOut() 方法一、显示和隐藏方法 hide() 和 show() 方法hide()：元素隐藏，隐藏的前提必须是元素 display:block；show()：元素显示，显示的前提必须是元素 displa...
jQuery按钮控制单排图片切换代码
04-07
"jQuery按钮控制单排图片切换代码"就是一个这样的实例，它利用jQuery库实现了一种简洁而有效的图片滚动切换效果，旨在为用户提供更加直观、交互性强的浏览体验。这个特效的核心在于通过左右箭头按钮来驱动图片在单行...
使用jquery修改display属性
dxyzhbb的博客
04-17 1万+
使用jquery修改display相当于修改一个css样式，因为display本身属于一个css属性，jquery修改display很简单，你只要知道如何使用jquery改变css就可以了 display是css的标准属性之一，常用的display属性值有： block : 块对象的默认值。用该值为对象之后添加新行 none : 隐藏对象。与visibility属性的hidden值不同，其不为...
手把手教你玩转CSDN博客！！
最新发布
2302_80728797的博客
06-09 3237
CSDN博客是一个宝贵的资源，可以帮助你学习编程思路、技巧，并通过阅读和分析代码示例来提高编程能力。通过不断地学习和实践，你将能够在编程之路上越走越远，为IT行业的发展做出贡献。记得在CSDN博客上分享你的学习心得和代码示例，以帮助和启发其他开发者。
jquery中的display
zhdd1234的专栏
04-17 824
dom中我们常用 对象.style.display = none; 殊不知在jquery中是错误的$("#id").show()表示display:block, $("#id").hide()表示display:none; $("#id").toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
jquery 设置style:display 其实很方便的哦
weixin_30266829的博客
11-30 576
("#id").css('display','none');$("#id").css('display','block');或$("#id")[0].style.display = 'none';$("#id")返回的是JQuery它是个集合肯定有display属性$("#id").show()表示display:block, $("#id").hide()表示display:...
jquery 设置style:display的方法
qhdzj87的专栏
01-18 3287
$("#id").css('display','none'); $("#id").css('display','block'); 或 $("#id")[0].style.display = 'none'; $("#id")[0].style.display = 'block'; $("#id").show()表示display:block, $("#id").hide()表示display:none; $("#id").toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如...
jQuery之动画-显示和隐藏
06-15 465
本质就是给这个元素设置了。
jQuery标签TAB控制图片切换特效代码
03-20
4. **切换效果**：在回调函数中，通过修改CSS属性（如`display`或`opacity`）来实现图片的切换效果。可能还会加入动画过渡，如使用`fadeIn()`和`fadeOut()`方法来平滑地显示和隐藏图片。 5. **激活状态管理**：确保...
jquery 控制的卷帘菜单
12-26
确保正确设置`display`属性，以控制菜单项的初始状态（默认隐藏或显示）。对于动画效果，可以利用CSS3的`transition`属性增强过渡效果，如透明度变化。 4. **最佳实践**： - 响应式设计：确保菜单在不同设备和屏幕...
利用JQUERY制作的点击图像伸展显示导航菜单广告
06-10
"利用JQUERY制作的点击图像伸展显示导航菜单广告"是一个巧妙的实现方式，它能够提升网站的吸引力和功能性。这个技术结合了jQuery库的力量，为用户提供了一种新颖的、动态的方式来展示信息，特别适合于公司形象的展示...
jquery css3按钮控制图片螺纹旋转切换特效
11-24
4. **切换图片**：在函数内部，计算新的旋转角度，并应用到当前显示的图片上，同时更改图片的display属性以切换显示的图片。 5. **动画效果**：使用CSS3的transition属性为图片旋转添加平滑过渡，让旋转看起来更...
jquery控制元素的隐藏和显示的几种方法，linux网络编程书籍
m0_58269070的博客
03-29 909
一次偶然，从朋友那里得到一份“java高分面试指南”，里面涵盖了25个分类的面试题以及详细的解析：JavaOOP、Java集合/泛型、Java中的IO与NIO、Java反射、Java序列化、Java注解、多线程&并发、JVM、Mysql、Redis、Memcached、MongoDB、Spring、Spring Boot、Spring Cloud、RabbitMQ、Dubbo 、MyBatis 、ZooKeeper 、数据结构、算法、Elasticsearch 、Kafka 、微服务、Linux。
html修改display属性的值,CSS display 属性详解
weixin_31297157的博客
06-04 997
display的所有属性{/* CSS 1 */display: none;display: inline;display: block;display: list-item;/* CSS 2.1 */display: inline-block;display: table;display: inline-table;display: table-cell;display: table-colum...
jqGrid
热门推荐
07-24 1万+
1. 初始化的时候不加载数据设置datatype: 'local' 1 $("#grid").jqGrid({ 2 url:"http://www.8qiu.cn", 3 datatype:"local", 4 //other options 5 }); 2. 当要加载数据的时候把datatype改成json或者XML: 1 $("#list").jqGrid
jquery控制css的display(控制元素的显示与隐藏)（全）
Allen_白的专栏
06-05 1006
比如要控制div的显示与隐藏，一句话就搞定了，请看下面使用说明。 $("#id").show()表示display:block, $("#id").hide()表示display:none; $("#id").toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。   $("#id").css('display','non
使用jquery获取dom的display属性值
06-09
可以使用jQuery的`css()`方法来获取DOM元素的display属性值，示例如下： ```javascript var displayValue = $('#myElement').css('display'); ``` 其中，`#myElement`是待获取display属性值的DOM元素的选择器。`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值