我可以使用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作爲可摺疊的項目符號嗎？

回答

相關問題