我可以使用字形作为可折叠的要点吗？

Question

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

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

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

像这样： http://www.codeply.com/go/zAVFMMybdr 但 Item3 和 Item4 项目符号要加粗并且 clickable/collapsible.

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

非常感谢任何帮助。我是新手，所以如果我没有充分解释自己，我很抱歉:)

P.S。按照指示，我在此处添加代码而不是提供外部 link.

.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>

Answer 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>

我可以使用字形作为可折叠的要点吗？

Can I use glyphicons as collapsible bullet points?

html

css

glyphicons

twitter-bootstrap-3