python : jquery实现左侧菜单

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了python : jquery实现左侧菜单相关的知识，希望对你有一定的参考价值。

左侧菜单

技术分享 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
    <style>
          .header{
            background-color: black;
            color: wheat;
        }
        .content{
            min-height: 50px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div style="height:400px;width: 200px;border: 1px solid #dddddd">
        <div class="item">
            <div class="header">标题一</div>
            <div id="i1" class="content hide">内容</div>
        </div>
        <div class="item">
            <div class="header">标题二</div>
            <div class="content hide">内容</div>
        </div>

        <div class="item">
            <div class="header">标题三</div>
            <div class="content hide">内容</div>
        </div>
    </div>
<script src="jquery-1.12.4.js"></script>
<script>
    $(".header").click(function () {
        $(this).next().removeClass(‘hide‘).parent().siblings().find(".content").addClass("hide")
//next获取下一个标签
    })
</script>

</body>
</html>
左侧菜单

 

以上是关于python : jquery实现左侧菜单的主要内容，如果未能解决你的问题，请参考以下文章

12个用得着的 JQuery 代码片段

jquery实现左侧菜单 效果

jquery实现后台系统左侧菜单的点击展开/收缩二级菜单效果

Xamarin 表单 - 侧边菜单左侧栏、片段和列表视图

jQuery--左侧菜单收缩隐藏

jquery实现全选，取消，反选的功能&实现左侧菜单