Javascript 我是否可以将引导折叠更改为仅在单击图标时显示/展开？

我正在制作一种选择框，他们可以在其中选择类别。我想要它，这样他们可以选择任何一项。为此，我需要在单击任意位置时不显示/隐藏项目，仅在单击+或-图标时才显示/隐藏项目。希望这是有道理的。我试着移动数据开关=“collapse”，以为我可以把它放在我的图标上，但结果它坏了

.list-group.list-group-root{
填充：0；
溢出：隐藏；
}
.list-group.list-group-root.list组{
页边距底部：0；
}
.list-group.list-group-root.list组项{
边界半径：0；
边框宽度：1px0；
字号：18px；
}
.list-group.list-group-root>。列表组项：第一个子项{
边框顶部宽度：0；
}
.list-group.list-group-root>.list group>.list group项目{
左侧填充：30px；
字体大小：16px；
}
.list-group.list-group-root>.list group>.list group>.list group项目{
左侧填充：45px；
字体大小：14px；
}
.列表组项.glyph图标{
右边距：5px；
}

---

这是一种方法

（如@Justin L.所述）

.list-group.list-group-root{
填充：0；
溢出：隐藏；
}
.list-group.list-group-root.list组{
页边距底部：0；
}
.list-group.list-group-root.list组项{
边界半径：0；
边框宽度：1px0；
字号：18px；
}
.list-group.list-group-root>。列表组项：第一个子项{
边框顶部宽度：0；
}
.list-group.list-group-root>.list group>.list group项目{
左侧填充：30px；
字体大小：16px；
}
.list-group.list-group-root>.list group>.list group>.list group项目{
左侧填充：45px；
字体大小：14px；
}
.列表组项.glyph图标{
右边距：5px；
}

1.
项目1.1

这是一种方法

（如@Justin L.所述）

.list-group.list-group-root{
填充：0；
溢出：隐藏；
}
.list-group.list-group-root.list组{
页边距底部：0；
}
.list-group.list-group-root.list组项{
边界半径：0；
边框宽度：1px0；
字号：18px；
}
.list-group.list-group-root>。列表组项：第一个子项{
边框顶部宽度：0；
}
.list-group.list-group-root>.list group>.list group项目{
左侧填充：30px；
字体大小：16px；
}
.list-group.list-group-root>.list group>.list group>.list group项目{
左侧填充：45px；
字体大小：14px；
}
.列表组项.glyph图标{
右边距：5px；
}

1.
项目1.1

您可以将每个可折叠区域的标题作为链接。如果将其转换为div，并用链接包装图标，您将获得所需的结果：

以前

<a href="#item-1" class="list-group-item" data-toggle="collapse">
    <i class="fa fa-plus pull-right"></i>Item 1
</a>

之后

项目1

您可以将每个可折叠区域的标题作为链接。如果将其转换为div，并用链接包装图标，您将获得所需的结果：

以前

<a href="#item-1" class="list-group-item" data-toggle="collapse">
    <i class="fa fa-plus pull-right"></i>Item 1
</a>

之后

项目1

谢谢，我很感激Hanks，我很感激