我可以使用glyphicons作为可折叠的项目符号吗？

是否可以设置可点击的图标为项目符号点而不是按钮？现在我已经设法放置按钮，但我隐藏了重点。我可以使用glyphicons作为可折叠的项目符号吗？

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

我试图把glyphicons子弹，所以，当我点击他们，他们崩溃，如果他们粗体（这意味着有在该子子弹描述）和当它们不可折叠时，它们正常或褪色。

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

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

任何帮助，非常感谢。我是新来的，所以我很抱歉，如果我没有足够的自我解释:)

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

.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> 
 
\t \t \t \t \t \t \t  </ul> 
 

 
</body>

来源

2016-09-07 user2576486

这当然是...你只需要在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>

来源

2016-09-07 14:57:26

这正是我需要的！谢谢：） – user2576486

我可以使用glyphicons作为可折叠的项目符号吗？

回答

相关问题