本文介绍: 折叠菜单 编写网页,设置CSS完成折叠菜单的结构和样式设置。 通过层级选择器、基本过滤选择器以及查找的方法获取指定的元素对象。 CSS页面代码:<style> *{ margin: 0; padding: 0; } ul li{ list–style: none; } .menu{ width: 150px; margin: 30px 500px; bo.
<style>
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
}
.menu{
width: 150px;
margin: 30px 500px;
border: 1px solid #515e7b;
}
p{
width: 100%;
height: 40px;
line-height: 40px;
padding-left: 10px;
box-sizing: border-box;
background-color: #515e7b;
color: #fff;
border-bottom: 1px solid #fff;
}
.list{
color: #000;
height: 100px;
font-size: 14px;
}
.list li{
height: 33px;
line-height: 33px;
padding-left: 10px;
box-sizing: border-box;
}
</style>
<ul class="menu">
<li>
<p>信息管理</p>
<ul class="list">
<li>未读信息</li>
<li>已读信息</li>
<li>信息列表</li>
</ul>
</li>
<li>
<p>商品管理</p>
<ul class="list">
<li>权限设置</li>
<li>用户列表</li>
<li>重置密码</li>
</ul>
</li>
<li>
<p>用户管理</p>
<ul class="list">
<li>权限设置</li>
<li>用户列表</li>
<li>重置密码</li>
</ul>
</li>
</ul>
引入JS代码:
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$(".menu ul").hide();
$(".menu>li>p").click(function(){
$(".menu>li>ul").slideUp();
$(this).next().slideToggle();
});
});
</script>
原文地址:https://blog.csdn.net/m0_53911328/article/details/125009235
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_17415.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。