1
私はカテゴリを選択できる選択ボックスの並べ替えを作っています。私はそれが好きなので、どちらかの項目を選ぶことができます。これを行うには、+または - アイコンをクリックしたときにのみ、アイテムをクリックして表示/非表示にする必要があります。うまくいけばそれは理にかなっている。私はデータトグルを移動しようとしました=「崩壊」は私のアイコン上に置くことができると思っていましたが、それは打ちのめされました。あなたが持っているアイコンをクリックすると、ブートストラップの折りたたみを表示/展開のみに変更できますか？
.list-group.list-group-root {
padding: 0;
overflow: hidden;
}
.list-group.list-group-root .list-group {
margin-bottom: 0;
}
.list-group.list-group-root .list-group-item {
border-radius: 0;
border-width: 1px 0 0 0;
font-size: 18px;
}
.list-group.list-group-root > .list-group-item:first-child {
border-top-width: 0;
}
.list-group.list-group-root > .list-group > .list-group-item {
padding-left: 30px;
font-size: 16px;
}
.list-group.list-group-root > .list-group > .list-group > .list-group-item {
padding-left: 45px;
font-size: 14px;
}
.list-group-item .glyphicon {
margin-right: 5px;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="list-group list-group-root well">
<a href="#item-1" class="list-group-item" data-toggle="collapse">
\t <i class="fa fa-plus pull-right"></i>Item 1
</a>
<div class="list-group collapse" id="item-1">
\t <a href="#item-1-1" class="list-group-item" data-toggle="collapse">
\t <i class="fa fa-plus pull-right"></i>Item 1.1
\t </a>
\t <div class="list-group collapse" id="item-1-1">
\t <a href="#" class="list-group-item">Item 1.1.1</a>
\t <a href="#" class="list-group-item">Item 1.1.2</a>
\t <a href="#" class="list-group-item">Item 1.1.3</a>
\t </div>
\t <a href="#item-1-2" class="list-group-item" data-toggle="collapse">
\t <i class="fa fa-plus pull-right"></i>Item 1.2
\t </a>
\t <div class="list-group collapse" id="item-1-2">
\t <a href="#" class="list-group-item">Item 1.2.1</a>
\t <a href="#" class="list-group-item">Item 1.2.2</a>
\t <a href="#" class="list-group-item">Item 1.2.3</a>
\t </div>
\t <a href="#item-1-3" class="list-group-item" data-toggle="collapse">
\t <i class="fa fa-plus pull-right"></i>Item 1.3
\t </a>
\t <div class="list-group collapse" id="item-1-3">
\t <a href="#" class="list-group-item">Item 1.3.1</a>
\t <a href="#" class="list-group-item">Item 1.3.2</a>
\t <a href="#" class="list-group-item">Item 1.3.3</a>
\t </div>
</div>
<a href="#item-2" class="list-group-item" data-toggle="collapse">
\t <i class="fa fa-plus pull-right"></i>Item 2
</a>
<div class="list-group collapse" id="item-2">
\t <a href="#item-2-1" class="list-group-item" data-toggle="collapse">
\t <i class="fa fa-plus pull-right"></i>Item 2.1
\t </a>
\t <div class="list-group collapse" id="item-2-1">
\t <a href="#" class="list-group-item">Item 2.1.1</a>
\t <a href="#" class="list-group-item">Item 2.1.2</a>
\t <a href="#" class="list-group-item">Item 2.1.3</a>
\t </div>
\t <a href="#item-2-2" class="list-group-item" data-toggle="collapse">
\t <i class="fa fa-plus pull-right"></i>Item 2.2
\t </a>
\t <div class="list-group collapse" id="item-2-2">
\t <a href="#" class="list-group-item">Item 2.2.1</a>
\t <a href="#" class="list-group-item">Item 2.2.2</a>
\t <a href="#" class="list-group-item">Item 2.2.3</a>
\t </div>
\t <a href="#item-2-3" class="list-group-item" data-toggle="collapse">
\t <i class="fa fa-plus pull-right"></i>Item 2.3
\t </a>
\t <div class="list-group collapse" id="item-2-3">
\t <a href="#" class="list-group-item">Item 2.3.1</a>
\t <a href="#" class="list-group-item">Item 2.3.2</a>
\t <a href="#" class="list-group-item">Item 2.3.3</a>
\t </div>
</div>
<a href="#item-3" class="list-group-item" data-toggle="collapse">
\t <i class="fa fa-plus pull-right"></i>Item 3
</a>
<div class="list-group collapse" id="item-3">
\t <a href="#item-3-1" class="list-group-item" data-toggle="collapse">
\t <i class="fa fa-plus pull-right"></i>Item 3.1
\t </a>
\t <div class="list-group collapse" id="item-3-1">
\t <a href="#" class="list-group-item">Item 3.1.1</a>
\t <a href="#" class="list-group-item">Item 3.1.2</a>
\t <a href="#" class="list-group-item">Item 3.1.3</a>
\t </div>
\t <a href="#item-3-2" class="list-group-item" data-toggle="collapse">
\t <i class="fa fa-plus pull-right"></i>Item 3.2
\t </a>
\t <div class="list-group collapse" id="item-3-2">
\t <a href="#" class="list-group-item">Item 3.2.1</a>
\t <a href="#" class="list-group-item">Item 3.2.2</a>
\t <a href="#" class="list-group-item">Item 3.2.3</a>
\t </div>
\t <a href="#item-3-3" class="list-group-item" data-toggle="collapse">
\t <i class="fa fa-plus pull-right"></i>Item 3.3
\t </a>
\t <div class="list-group collapse" id="item-3-3">
\t <a href="#" class="list-group-item">Item 3.3.1</a>
\t <a href="#" class="list-group-item">Item 3.3.2</a>
\t <a href="#" class="list-group-item">Item 3.3.3</a>
\t </div>
</div>
</div><!-- end category list -->
後
前に本当にありがとうございました！ –