Question

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

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

我试图将子弹用于子弹，因此当我点击它们时，如果它们被粗体化（意味着子弹中的描述）并且它们是＆＃39，那么它们就会崩溃;当它们不可折叠时，恢复正常或褪色。

这样的事情： http://www.codeply.com/go/zAVFMMybdr 但是Item3和Item4项目符号需要加粗和可点击/可折叠。

现在我想知道我是否可以使用按钮并隐藏背景和轮廓，因此只显示了字形。但在这种情况下，我还需要指定Item1和Item2按钮不可点击。

非常感谢任何帮助。我是新手，所以如果我不能很好地解释自己，我很抱歉：）

P.S。按照指示，我在这里添加代码而不是提供外部链接。

＆＃13;

.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";
  }

＆＃13;

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

＆＃13;

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>

我可以使用glyphicons作为可折叠的子弹点吗？

1 个答案: