jquery手风琴折叠菜单

最新推荐文章于 2023-11-22 19:55:36 发布

Melody–Zhang

最新推荐文章于 2023-11-22 19:55:36 发布

阅读量3.4k

点赞数 2

分类专栏：菜单（menu）文章标签： menu

本文链接：https://blog.csdn.net/qq_15548121/article/details/79985402

版权

菜单（menu）专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <title>折叠展开的菜单</title>
</head>
<body>
<style type="text/css">
    .oneLevel {
        display: inline-block;
        width: 200px;
        line-height: 32px;
        border-bottom: 1px solid #ccc;
        background: #9d9d9d;
        cursor: pointer;
    }

    .oneLevel > span {
        margin-left: 10px;
    }

    .oneLevelList {
        display: none;
    }
</style>
<script src="js/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.bMenuTitle').on('click',function(){
        $(this).children('ul').slideDown();
        $(this).siblings().children('ul').slideUp();

    })
});

</script>
<!-- Keep all menus within menuDiv-->
<ul id="menuDiv" class="bMenuList">
    <li class="bMenuTitle">
        <span class="oneLevel" >概要信息</span>
        <ul class="oneLevelList" id="sub1">
            <li><a href="#">概要信息</a></li>
        </ul>
    </li>
    <li class="bMenuTitle"><span class="oneLevel">我的费用</span>
        <ul class="oneLevelList" id="sub2">
            <li><a href="#">缴费</a></li>
            <li><a href="#">缴费记录查询</a></li>
        </ul>
    </li>
    <li class="bMenuTitle"><span class="oneLevel" >我的档案</span>
        <ul class="oneLevelList" id="sub3">
            <li><a href="#">仪表信息</a></li>
            <li><a href="#">挂表</a></li>
        </ul>
    </li>
    <li class="bMenuTitle"><span class="oneLevel">我的报表</span>
        <ul class="oneLevelList" id="sub4">
            <li><a href="">收费月报表</a></li>
            <li><a href="">收费年报表</a></li>
        </ul>
    </li>
</ul>
</body>

</html>

手风琴下拉菜单，默认全部隐藏，展开时仅展开一个，其他的会收缩起来

Melody–Zhang

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
jquery手风琴折叠菜单

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"/&gt; &lt;title&gt;折叠展开的菜单&lt;/title&gt;&lt;/head&gt;
复制链接

扫一扫