jQuery+风琴拉伸效果唯美少女滴风格菜单的做法

最新推荐文章于 2023-02-06 11:22:49 发布

我是X大魔王

最新推荐文章于 2023-02-06 11:22:49 发布

阅读量157

点赞数 1

分类专栏： HTML页面部件🦄 文章标签： javascript css html jquery js

转载必须声明

本文链接：https://blog.youkuaiyun.com/Xmumu_/article/details/119087689

版权

HTML页面部件🦄 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的风琴菜单效果。通过简单的HTML结构和jQuery代码，实现了菜单项的展开与折叠功能。提供了完整的代码示例及下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

欢迎来到HTML部件频道💞

今天记录一款非常常见的菜单做法，具体效果看下图：🧐
在这里插入图片描述

在这里插入图片描述

好啦如果说对今天的分享感兴趣的话就继续往下看吧💨

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!--兼容性设置-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery风琴菜单</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />  <!--初始化样式-->
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css"> 
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.staticfile.org/ionicons/2.0.1/css/ionicons.min.css">
</head>
<body>
<div class="zzsc-container">
	<section class="accordion">
		   <div class="item">
				<i class="icon ion-location"></i>
				<h3>Location</h3>
		   </div>
				<p>X MONSTER  输入内容</p>
			<div class="item">
				<i class="icon ion-cloud"></i>
				<h3>Music</h3>
		   </div>
			<p>X MONSTER   输入内容</p>
			<div class="item">
				<i class="icon ion-chatboxes"></i>
				<h3>Notes</h3>
		   </div>
				<p>X MONSTER    输入内容</p>
			<div class="item">
				<i class="icon ion-icecream"></i>
				<h3>Books</h3>
		   </div>
				<p>X MONSTER    输入内容</p>
			<div class="item">
				<i class="icon ion-person-add"></i>
				<h3>Tendances</h3>
		   </div>
			   <p>X MONSTER  输入内容</p>
	   </section>
</div>

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
	(function ($) {
		'use strict';
		$('.item').on("click", function () {
			$(this).next().slideToggle(100);
			$('p').not($(this).next()).slideUp('fast');
		});
	}(jQuery));
</script>

<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>

</body>
</html>

其实这里主要用到jquery-1.11.0.min.js来完成，具体的代码欢迎点击以下下载链接，就不多逼逼了💚

链接：https://pan.baidu.com/s/1aAKJG8_WZyxl4NBs6GaCsQ
提取码：6666

好咯，今天的分享在这里就结束啦，欢迎订阅我的频道呀，有问题欢迎评论区以及私信见啦💗💗💗欢迎评论、点赞、关注❣❣❣