HTML(HBuilder)作业题8- 图片点击手风琴（jquery）

问：点击“图片文字”（带透明度），下拉展示图片

答：$(" ").click(function()

        slideDown(时间).siblings("  ")

目录

1.css样式（style）

2.展示部分

3.jquery代码部分（script）

---

1.css样式（style）

        <style>
			li{ background-color: #aaffff;/* 未选择时候的背景 */
				width:301px;
				list-style:none;/* 去除点 */
				text-align: center;/* 居中文字对齐 */
				border: 2px solid cadetblue;}
			.xuanzhong{
				background-color: #00ff00;
				border-bottom: 2px solid red;}
			.xianshi{display: block;}
			.yincang{display: none;}
			span{width: 301px;}
		</style>

2.展示部分

        <div>
			<li class="xuanzhong">图片1</li>
			<span class="xianshi"><img src="img/图片%20(1).bmp"></span>
			<li >图片2</li>
			<span class="yincang"><img src="img/图片%20(2).bmp"></span>
			<li >图片3</li>
			<span class="yincang"><img src="img/图片%20(3).bmp"></span>
			<li >图片4</li>
			<span class="yincang"><img src="img/图片%20(4).bmp"></span>
		</div>

3.jquery代码部分（script）

		<script>
			$(document).ready(function(){
				$("li").click(function(){
					$(this).addClass( "xuanzhong").siblings("li").removeClass(//接下面
"xuanzhong");
					// 添加选中xuanzhong的css,移除同辈siblings:li的xuanzhong的css
					$(this).next().slideDown(1000).siblings("span ").slideUp(1000) ;
				})
			})
		</script>

------------分割线---------------

菜鸟古古 2022-1-6 18:19:51