jquery实现的折叠式菜单（手风琴式菜单）

最新推荐文章于 2024-07-02 08:55:42 发布

蒲公英1001

最新推荐文章于 2024-07-02 08:55:42 发布

阅读量6.6k

点赞数 11

文章标签： javascript jquery

本文链接：https://blog.csdn.net/wangyining070205/article/details/116169342

版权

最近学习jquery，从网上找了一段实现折叠式菜单的代码，发现实现的不够理想，整明白后改写了一下。效果如下：
在这里插入图片描述

完整代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>折叠式菜单特效</title>
		<style>
			* {
			    padding: 0;
			    margin: 0;
			}
			ul {
			    list-style-type: none;
			    margin: 100px;
			}
			.menu_head {
			    width: 185px;
			    height: 46px;
			    line-height: 46px;
			    padding-left: 38px;
			    font-size: 16px;
			    color: #475052;
			    cursor: pointer;
			    border: 1px solid #e1e1e1;
			    position: relative;
			    margin: 0px;
			    font-weight: bold;
			    background-color: #f0f0f0;
				background-image: url(../img/pro_plus.png);
				background-position:center right;
				background-repeat: no-repeat;
			}
			.menu_list .current {
			    background-image:url(img/pro_down.png);
			}
			.menu_body {
			    width: 223px;
			    height: auto;
			    overflow: hidden;
			    line-height: 38px;
			    border-left: 1px solid #e0e0e0;
			    background-color: #fff;
			    border-right: 1px solid #e0e0e0;
				display: none;
			}
			.menu_body a {
			    display: block;
			    width: 223px;
			    height: 38px;
			    line-height: 38px;
			    padding-left: 38px;
			    color: #666;
			    background: #fff;
			    text-decoration: none;
			    border-bottom: 1px solid #e0e0e0;
			}
		</style>
     <script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <ul class="menu_list">
      <li>
        <p class="menu_head">HTML语言</p>
        <div class="menu_body">
          <a href="#">HTML基础</a>
          <a href="#">图像和超链接</a>
          <a href="#">列表和表格</a>
          <a href="#">音频和视频</a>
        </div>
      </li>
      <li>
        <p class="menu_head">CSS样式表</p>
        <div class="menu_body">
          <a href="#">CSS基础</a>
          <a href="#">字体文本属性</a>
          <a href="#">超链接样式</a>
          <a href="#">列表样式</a>
          <a href="#">表格样式</a>
					<a href="#">表单样式</a>
        </div>
      </li>
      <li>
        <p class="menu_head">网页布局案例</p>
        <div class="menu_body">
          <a href="#">登陆页面的制作</a>
          <a href="#">入驻页面的制作</a>
          <a href="#">招生信息网</a>
          <a href="#">美妆网页</a>      
        </div>
      </li>
      <li>
        <p class="menu_head">JavaScript</p>
        <div class="menu_body">
          <a href="#">JS的基础语法 </a>
          <a href="#">BOM对象</a>
          <a href="#">DOM对象</a>
        </div>
      </li>
    </ul>
   <script type="text/javascript">
   $(function(){
       $("p.menu_head").click(function(){
				$(this).toggleClass("current");//toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换。
				$(this).next("div").slideToggle(500);//slideToggle() 方法在被选元素上进行 slideUp() 和 slideDown() 之间的切换。
				var lis = $(this).parent('li').siblings('li'); //siblings()  方法返回被选元素的所有兄弟元素
		     lis.children('p').removeClass("current");
			   lis.children('div').slideUp(500);  //slideUp() 方法以滑动方式隐藏
       });
   });
   </script>
  </body>
</html>

图片+：
在这里插入图片描述图片-

蒲公英1001

关注

11
点赞
踩
73

收藏

觉得还不错? 一键收藏
4
评论
jquery实现的折叠式菜单（手风琴式菜单）

最近学习jquery，从网上找了一段实现折叠式菜单的代码，发现实现的不够理想，整明白后改写了一下。效果如下：在这里插入代码片<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>折叠式菜单特效</title> <style> * { padding: 0; margin: 0; } ul
复制链接

扫一扫