点击展开兄弟收起来

Posted 2020-08-19 jinsuo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了点击展开兄弟收起来相关的知识，希望对你有一定的参考价值。

<html>
    <head>
        <title>可折叠展开的导航条
        </title>
        <style type="text/css">
        body {
    margin:0;
    padding:0 0 12px 0;
    font-size:12px;
    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:150px;
    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 type="text/javascript" src="http://ku.shouce.ren/libs/jquery/1/jquery1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
    $(".level1 > a").click(function() {
        $(this).addClass("current") //给当前元素添加"current"样式
        .next().show() //下一个元素显示
        .parent().siblings().children("a").removeClass("current") //父元素的兄弟元素的子元素<a>移除"current"样式
        .next().hide();
        //它们的下一个元素隐藏
        return false;
    });
});
    
    </script>
</head>
    <body>
        <div class="box">
            <ul class="menu">
                <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">短袖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>
    </body>
</html>

以上是关于点击展开兄弟收起来的主要内容，如果未能解决你的问题，请参考以下文章

如何把展开的注册表用快捷键收起来

ASP中关于TreeView控件的问题，怎样展开、收缩所有子节点？

pycharm添加Odoo代码片段

HTML中列表收起与展开

废品回收进行中，你还在等什么，有废品我们收。

需要为某些片段禁用 CollapsingToolbarLayout 上的展开

点击展开 兄弟收起来

点击展开兄弟收起来