我可以使用字形作为可折叠的项目符号吗？答案

【问题标题】：Can I use glyphicons as collapsible bullet points?我可以使用字形作为可折叠的项目符号吗？
【发布时间】：2017-01-15 06:24:05
【问题描述】：

是否可以为项目符号而不是按钮设置可点击的字形？现在我已经设法放置按钮，但我隐藏了要点。

代码在这里： http://www.codeply.com/go/WDCzrCNhYG

我正在尝试为项目符号添加字形图标，这样当我点击它们时，如果它们是粗体的（意味着子项目符号中有描述），它们就会折叠，并且它们是正常的或褪色的而不是它们可折叠。

类似这样的： http://www.codeply.com/go/zAVFMMybdr 但 Item3 和 Item4 项目符号被加粗并且可点击/折叠。

现在我正在尝试确定是否可以使用按钮并隐藏背景和轮廓，以便只显示字形图标。但在这种情况下，我还需要指定 Item1 和 Item2 按钮不可点击。

非常感谢任何帮助。我是新手，所以如果我解释得不够好，我很抱歉:)

附：按照指示，我在此处添加代码，而不是提供外部链接。

.btn {
    padding: 0px 5px;
}

/* Icon when the collapsible content is shown */
  .btn:after {
    font-family: "Glyphicons Halflings";
    content: "\e113";
    float: left;
  }

  /* Icon when the collapsible content is hidden */
  .btn.collapsed:after {
    content: "\e080";
  }

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<body>
<p class="font_heading"><small>Attractions</small></p>
                            <ul id="placePul" style="list-style: none;">
                                <li style="margin-left:28px">Item1</li>   
                                <li style="margin-left:28px">Item2</li>
                                <li><button type="button" class="btn btn-info btn-xs collapsed" data-toggle="collapse" data-target="#Demo1"></button> Item3</li>
                                    <ul id="Demo1" class="collapse">
                                        <li>Description 1</li>
                                        <li>Description 2</li>
                                        <li>Description 3</li>
                                    </ul>
                                <li><button type="button" class="btn btn-info btn-xs collapsed" data-toggle="collapse" data-target="#Demo2"></button> Item4</li>
                                    <ul id="Demo2" class="collapse">
                                        <li>Description 4</li>
                                        <li>Description 5</li>
                                        <li>Description 6</li>
                                    </ul>
							    </ul>

</body>

【问题讨论】：

标签： html css twitter-bootstrap-3 glyphicons

【解决方案1】：

当然是……您只需将data-toggle 属性移动到li，然后专门针对它。

li {
  padding-left: 1.5em;
  position: relative;
}
/* Icon when the collapsible content is shown */

li[data-toggle="collapse"]:after {
  position: absolute;
  left: 0;
  top: 0;
  font-family: "Glyphicons Halflings";
  content: "\e113";
  color:black;
}
/* Icon when the collapsible content is hidden */

li[data-toggle="collapse"].collapsed:after {
  content: "\e080";
  color:grey;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<h4>Toggling </h4>
<ul id="placePul" style="list-style: none;">
  <li>Item1</li>
  <li>Item2</li>
  <li class="collapsed" data-toggle="collapse" data-target="#Demo1">Item3</li>
  <ul id="Demo1" class="collapse">
    <li>Description 1</li>
    <li>Description 2</li>
    <li>Description 3</li>
  </ul>
  <li class="collapsed" data-toggle="collapse" data-target="#Demo2">Item4</li>
  <ul id="Demo2" class="collapse">
    <li>Description 4</li>
    <li>Description 5</li>
    <li>Description 6</li>
  </ul>
</ul>

【讨论】：

这正是我所需要的！谢谢:)