javascript - 折叠列表 : Keep open only the active one open

Question

这在我的应用程序上运行良好，但由于某种原因我无法让它在这里正常工作。无论如何，我的问题是，当我单击列表标题时，我想关闭之前打开的列表标题并仅保留事件的列表标题打开。目前它会打开我点击的所有内容，但也会保持所有内容打开。关于如何实现这一目标有什么想法吗？

$('.cl-item:not(.cl-item-no-sub) > .cl-label-wrap .cl-label-title').click(function() {
    $(this).parent().parent().toggleClass('cl-item-open');
});
$('.cl-item:not(.cl-item-no-sub) > .cl-label-wrap .cl-label-icon').click(function() {
    $(this).parent().parent().toggleClass('cl-item-open');
})

$('.cl-item').each(function(){
    console.log ($(this).find('> ul').length);
    if ( $(this).find('> ul').length === 0 ) {
        $(this).addClass('cl-item-no-sub');
    }
})

$li-padding: 7px;
$li-padding-tools: 10px;
$cascade-padding: 25px;
$bg-level-1: #dadada;
$bg-level-2: #ffffff;
$bg-level-3: #ffffff;
$color-tools: #9e9e9e;
$toggle-width: 1.5em;

.cl-start-wrap {
    list-style: none;
    padding: 0;
    margin: 30px;
    width: 300px;
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    > li {
        > .cl-label-wrap {
            padding: $li-padding 0 $li-padding $cascade-padding*0;
            margin: 1px 0;
            background: $bg-level-1;
            &:hover {
                background: darken($bg-level-1, 5%);
            }
        }
        > ul > li {
            > .cl-label-wrap {
                padding: $li-padding 0 $li-padding $cascade-padding*1;
                background: $bg-level-2;
                &:hover {
                    background: darken($bg-level-2, 5%);
                }
            }
            > ul > li {
                > .cl-label-wrap {
                    padding: $li-padding 0 $li-padding $cascade-padding*2;
                    background: $bg-level-3;
                    &:hover {
                        background: darken($bg-level-3, 5%);
                    }
                }
            }
        }
    }
}

.cl-item {
    > ul {
        
    }
    > .cl-label-wrap {
        .cl-label-title {
            cursor: pointer;
        }
        .cl-label-icon {
            cursor: pointer;
            text-align: center;
            &:before {
                cursor: pointer;
                display: inline-block;
                font: normal normal normal 14px/1 FontAwesome;
                font-size: inherit;
                text-rendering: auto;
                -webkit-font-smoothing: antialiased;
            }
        } 
        .cl-label-tools {
            a {
                color: $color-tools;
                &:hover {
                    color: darken($color-tools, 10%);
                }
            }
        }
    }
}
.cl-item:not(.cl-item-open) {
    > ul {
        display: none;
    }
    > .cl-label-wrap {
        .cl-label-icon {
            &:before {
                content: "\f0da";
            }
        } 
    }
}
.cl-item.cl-item-open {
    > .cl-label-wrap {
        .cl-label-icon {
            &:before {
                content: "\f0d7";
            }
        } 
    }
}
.cl-item.cl-item-no-sub {
    > .cl-label-wrap {
        .cl-label-title {
            cursor: default;
        }
        .cl-label-icon {
            &:before {
                content: "";
            }
        } 
    }
}

// Label-Flexbox
.cl-label-wrap {
    display: table-cell;
    -ms-display: flex;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: flex-start;
    .cl-label-title {
        order: 1;
        flex: 1 1 auto;
        align-self: auto;
    }
    .cl-label-icon {
        order: 0;
        flex: 0 1 $toggle-width;
        align-self: auto;
    }
    .cl-label-tools {
        order: 2;
        flex: 0 1 auto;
        align-self: auto;
        white-space: nowrap;
        padding: 0 $li-padding-tools;
    }
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<ul class="cl-start-wrap">
    <li class="cl-item">
        <div class="cl-label-wrap">
            <span class="cl-label-title">Label 1</span>
            <span class="cl-label-icon"></span>
            <span class="cl-label-tools">
                <a href="#"><i class="fa fa-plus"></i></a>
            </span>
        </div>
        <ul>
            <li class="cl-item">
                <div class="cl-label-wrap">
                    <span class="cl-label-title">Label 1.1</span>
                    <span class="cl-label-icon"></span>
                    <span class="cl-label-tools">
                        <a href="#"><i class="fa fa-view"></i></a>
                        <a href="#"><i class="fa fa-plus"></i></a>
                    </span>
                </div>
                <ul>
                    <li class="cl-item">
                        <div class="cl-label-wrap">
                            <span class="cl-label-title">Label 1.1.1</span>
                            <span class="cl-label-icon"></span>
                            <span class="cl-label-tools">
                                <a href="#"><i class="fa fa-plus"></i></a>
                            </span>
                        </div>
                    </li>
                    <li class="cl-item">
                        <div class="cl-label-wrap">
                            <span class="cl-label-title">Label 1.1.2</span>
                            <span class="cl-label-icon"></span>
                            <span class="cl-label-tools">
                                <a href="#"><i class="fa fa-plus"></i></a>
                            </span>
                        </div>
                    </li>
                    <li class="cl-item">
                        <div class="cl-label-wrap">
                            <span class="cl-label-title">Label 1.1.3</span>
                            <span class="cl-label-icon"></span>
                            <span class="cl-label-tools">
                                <a href="#"><i class="fa fa-plus"></i></a>
                            </span>
                        </div>
                    </li>
                </ul>
            </li>
            <li class="cl-item">
                <div class="cl-label-wrap">
                    <span class="cl-label-title">Label 1.2</span>
                    <span class="cl-label-icon"></span>
                    <span class="cl-label-tools">
                        <a href="#"><i class="fa fa-view"></i></a>
                        <a href="#"><i class="fa fa-plus"></i></a>
                    </span>
                </div>
            </li>
        </ul>
    </li>
    <li class="cl-item">
        <div class="cl-label-wrap">
            <span class="cl-label-title">Label 2</span>
            <span class="cl-label-icon"></span>
            <span class="cl-label-tools">
                <a href="#"><i class="fa fa-view"></i></a>
                <a href="#"><i class="fa fa-plus"></i></a>
            </span>
        </div>
        <ul>
            <li class="cl-item">
                <div class="cl-label-wrap">
                    <span class="cl-label-title">Label 2.1</span>
                    <span class="cl-label-icon"></span>
                    <span class="cl-label-tools">
                        <a href="#"><i class="fa fa-view"></i></a>
                        <a href="#"><i class="fa fa-plus"></i></a>
                    </span>
                </div>
            </li>
            <li class="cl-item">
                <div class="cl-label-wrap">
                    <span class="cl-label-title">Label 2.2</span>
                    <span class="cl-label-icon"></span>
                    <span class="cl-label-tools">
                        <a href="#"><i class="fa fa-view"></i></a>
                        <a href="#"><i class="fa fa-plus"></i></a>
                    </span>
                </div>
            </li>
            <li class="cl-item">
                <div class="cl-label-wrap">
                    <span class="cl-label-title">Label 2.3</span>
                    <span class="cl-label-icon"></span>
                    <span class="cl-label-tools">
                        <a href="#"><i class="fa fa-view"></i></a>
                        <a href="#"><i class="fa fa-plus"></i></a>
                    </span>
                </div>
            </li>
        </ul>
    </li>
    <li class="cl-item">
        <div class="cl-label-wrap">
            <span class="cl-label-title">Label 3</span>
            <span class="cl-label-icon"></span>
            <span class="cl-label-tools">
                <a href="#"><i class="fa fa-view"></i></a>
                <a href="#"><i class="fa fa-plus"></i></a>
            </span>
        </div>
    </li>
</ul>

Answer 1

使用siblings函数关闭除当前项目之外的所有内容:

$('.cl-item:not(.cl-item-no-sub) > .cl-label-wrap .cl-label-title, 
   .cl-item:not(.cl-item-no-sub) > .cl-label-wrap .cl-label-icon').click(
  function() {
    var parent = $(this).parent().parent();
    parent.siblings().removeClass("cl-item-open");
    parent.toggleClass('cl-item-open');
  }
);