建议折叠菜单的实现

谁践踏了优雅 2022-05-27 08:08 226阅读 0赞

<style>
    body{margin:0;padding:0 0 12px 0;font-size:14px;line-height:22px;font-family:"\5b8b\4f53","Arial Narrow";background:#fff;}
    form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
    input,select{font-size:12px;line-height:16px;}
    img{border:0;}
    ul,li{list-style-type:none;}
    a {color:#00007F;text-decoration:none;}
    a:hover {color:#bd0a01;text-decoration:underline;}
    
    .box {
        width: 350px;
    	margin: 0 auto;
    }
    .menu{
    	overflow:hidden;
    	border-color: #C4D5DF;
        border-style: solid;
        border-width: 0 1px 1px;
    }
    /* lv1 */
    .menu li.level1 a{
        display: block;
        height: 28px;
        line-height: 28px;
        background:#EBF3F8;
    	font-weight:700;
        color: #5893B7;
    	text-indent: 14px;
    	border-top: 1px solid #C4D5DF;
    }
    .menu li.level1 a:hover{text-decoration:none;}
    .menu li.level1 a.current{background:#B1D7EF;}
    /* lv2 */
    .menu li ul{overflow:hidden;}
    .menu li ul.level2{display:none;}
    .menu li ul.level2 li a{
        display: block;
        height: 28px;
        line-height: 28px;
        background:#ffffff;
    	font-weight:400;
        color: #42556B;
    	text-indent: 18px;
    	border-top: 0px solid #ffffff;
        overflow: hidden;
    }
    .menu li ul.level2 li a:hover{
    	color:#f60;
    }
    </style>
    <script src="jquery-1.7.2.js"></script>
    <script>
    $(function(){
    	$('.level1 a').click(function(){
    		$(this)
    			.addClass('current')
    			.next()
    			.show('fast')
    			.parent()
    			.siblings()
    			.children('a')
    			.removeClass('current')
    			.next()
    			.hide('slow');
    	});	
    });
    </script>
    </head>
    <body>
    <div class="box">
    	<ul class="menu">
    		<li class="level1">
    			<a href="#none" class="">衬衫</a>
    			<ul class="level2">
    				<li><a href="#none">短袖衬衫</a></li>
    				<li><a href="#none">长袖衬衫</a></li>
    				<li><a href="#none">短袖T恤</a></li>
    				<li><a href="#none">长袖T恤</a></li>
    			</ul>
    		</li>
    		<li class="level1">
    			<a href="#none">卫衣</a>
    			<ul class="level2">
    				<li><a href="#none">开襟卫衣</a></li>
    				<li><a href="#none">套头卫衣</a></li>
    				<li><a href="#none">运动卫衣</a></li>
    				<li><a href="#none">童装卫衣</a></li>
    			</ul>
    		</li>
    		<li class="level1">
    			<a href="#none">裤子</a>
    			<ul class="level2">
    				<li><a href="#none">短裤</a></li>
    				<li><a href="#none">休闲裤</a></li>
    				<li><a href="#none">牛仔裤</a></li>
    				<li><a href="#none">免烫卡其裤</a></li>
    			</ul>
    		</li>
    	</ul>
    </div>
    <script src="jquery-1.7.2.js"></script>

发表评论取消回复

表情：

评论列表（有 0 条评论，226人围观）

还没有评论，来说两句吧...

相关阅读

相关多级折叠下拉导航菜单的Qt Quick-QML实现

多级折叠下拉导航菜单的Qt Quick-QML实现在本文中，我们将探讨如何使用Qt Quick和QML来实现一个多级折叠下拉导航菜单，该菜单支持动态添加和卸载子菜单项，并且

素颜马尾好姑娘i/ 2024年03月09日 02:52/ 0 赞/ 86 阅读

相关 jQuery实现折叠菜单

jQuery实现折叠菜单今天在观看李南江老师的jQuery视屏时，正好遇到老师在讲jQuery实现折叠菜单，但是老师的折叠菜单不是很完善在这里我对老师的代

小鱼儿/ 2023年06月15日 06:38/ 0 赞/ 17 阅读

相关 Layui实现左侧导航栏菜单可自由折叠

先看Layui官方的后台管理界面，用过的朋友可以知道，左侧的导航栏都是固定的，并不能折叠起来。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZ

Love The Way You Lie/ 2022年11月11日 05:22/ 0 赞/ 819 阅读

相关 jQuery折叠菜单

[jQuery折叠菜单][jQuery] 一直对前端的东西掌握的不是太好,最近抽出点时间稍微学点jQuery。感觉确实很好用，提供了一些现成的好东西，还能跨浏览器。这里就

男娘i/ 2022年08月06日 01:19/ 0 赞/ 200 阅读

相关 Jquery——Day9（折叠菜单）

1、引用折叠菜单 $('accordion').accordion(); 2、修改accordion样式 //无需修改ui里的css，直接用styl

柔光的暖阳◎/ 2022年07月16日 18:20/ 0 赞/ 179 阅读

相关利用JQuery实现左侧菜单栏可折叠功能

今天给大家介绍一下左侧菜单栏可折叠功能，在后台管理中左侧菜单折叠功能是特别常见的一个功能，基本不管是什么类型的管理后台都会涉及到这个功能的实现。想学习分布式、微服务、J

你的名字/ 2022年07月16日 09:10/ 0 赞/ 330 阅读

相关折叠式的菜单

关于折叠式的菜单，网上有挺多的源代码，但是我搜了一下，关于jQuery方面还有css方面上有些看不懂，所以干脆用其他我觉得较为简单的方式来创建折叠式的菜单，知识比较少，所以看不

以你之姓@/ 2022年07月12日 15:23/ 0 赞/ 230 阅读

相关 jQuery 折叠菜单

本文实例讲述了jQuery实现的简单折叠菜单(折叠面板)效果代码，主要介绍了jQuery实现的简单折叠菜单(折叠面板)效果代码,涉及jQuery中slideToggle与tog

ゝ一世哀愁。/ 2022年06月07日 04:48/ 0 赞/ 282 阅读

相关建议折叠菜单的实现

<style> body{margin:0;padding:0 0 12px 0;font-size:14px;line-height:22px;font-fa

谁践踏了优雅/ 2022年05月27日 08:08/ 0 赞/ 227 阅读

相关 js实现简单的下拉折叠菜单

<!doctype html> <html> <head> <meta charset="utf-8"> <title>js实现简单的下

ゞ浴缸里的玫瑰/ 2022年05月09日 06:58/ 0 赞/ 201 阅读