javascript - Callapse 列表:仅保持打开活动的打开
问题描述
这在我的应用程序上运行良好,但由于某种原因,我无法让它在这里正常工作。无论如何,我的问题是,当我单击列表标题时,我想关闭先前打开的标题并仅保持活动的标题打开。目前它会打开我点击的所有内容,但也会保持所有内容打开。关于如何实现这一目标的任何想法?
$('.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>
解决方案
使用该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');
}
);
推荐阅读
- android - 安卓工作室 | 无法运行新创建的项目
- java - 从 Tomcat 中的 context.xml 中检索资源的方法
- android - 如何在标签栏指示器中给出渐变线
- javascript - VueJS - 在异步调用 API 完成并加载所有 dom 后渲染所有组件
- android - 如何更改特定用户android的Firebase身份验证的电子邮件ID
- python - 如何在python上以彩色打印特定单词?
- visual-studio - 如何提取当前安装的 Visual Studio 组件 ID?
- javascript - redux-form 中的同名字段
- ios - 如何使用 Stripe 获取卡号、cvv 和到期日期的单独文本字段
- javascript - jQuery中的回调