如何允許通過下拉選擇通過圖標

我使用帶引導程序的fuelux通過下拉菜單創建一些很好的選擇。如何允許通過下拉選擇通過圖標

在下拉列表中，我通過字體 - 真棒放置圖標。我已經設法讓圖標呈現正常，選中後，圖標就會被選中。

我的問題是當我點擊一個激活的下拉圖標。選擇發生但沒有設置。我必須點擊下拉列表中圖標周圍的文字或空白區域。

有誰知道如何解決這個問題？

這裏是一個JS小提琴演示該問題：

中的jsfiddle的代碼如下：

<div class="row"> 
    <div class="col-md-12"> 
     <form class="form-horizontal"> 
      <div class="form-group"> 
       <label class="col-md-4 control-label" for="title">Title</label> 
       <div class="col-md-6"> 
        <input 
         id="title" 
         name="title" 
         type="text" 
         placeholder="Enter the title" 
         class="form-control input-md"/> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label class="col-md-4 control-label" for="icon">Icon</label> 
       <div class="col-md-6 fuelux"> 
        <div 
         class="btn-group selectlist" 
         data-initialize="selectlist" 
         id="iconSelectlist"> 
         <button 
          class="btn btn-default dropdown-toggle" 
          data-toggle="dropdown" 
          type="button"> 
          <span class="selected-label"> 
           <a href="#"><i class="fa fa-users fa-lg"></i></a> 
          </span> 
          <span class="caret"></span> 
          <span class="sr-only">Toggle Dropdown</span> 
         </button> 
         <ul class="dropdown-menu" role="menu"> 
          <li data-value="a"> 
           <a href="#"><i class="fa fa-users fa-lg"></i> Users</a> 
          </li> 
          <li data-value="b"> 
           <a href="#"><i class="fa fa-camera fa-lg"></i> Camera</a> 
          </li> 
         </ul> 
         <input 
          class="hidden hidden-field" 
          name="mySelectlist" 
          readonly="readonly" 
          aria-hidden="true" 
          type="text"/> 
        </div> 
       </div> 
      </div> 
     </form> 
    </div> 
</div>

CSS：

.container-fluid { 
    margin-top: 10px; 
} 

.row { 
    margin: auto 
} 
.row.no-pad { 
    margin-right:0; 
    margin-left:0; 
} 
.row.no-pad >[class*='col-'] { 
    padding-right:0; 
    padding-left:0; 
} 
ul.dropdown-menu-form { 
    color: black; 
} 
.selected-label { 
    color: #555; 
} 
.dropdown-toggle { 
    border-color: #ccc; 
} 
.dropdown-toggle:focus { 
    border-color: #ccc; 
} 
.dropdown-toggle:hover { 
    border-color: #ccc; 
} 
.caret { 
    color: #333; 
}

外部資源：

http://exacttarget.github.io/fuelux/assets/vendor/bootstrap/dist/css/bootstrap.min.css 
http://exacttarget.github.io/fuelux/assets/vendor/fuelux/dist/css/fuelux.css 
http://exacttarget.github.io/fuelux/assets/vendor/bootstrap/dist/js/bootstrap.js 
http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css 
http://www.fuelcdn.com/fuelux/3.0.2/js/fuelux.min.js

DTD：

HTML 5

標準化CSS：

true

身體標籤：

<body class="fuelux">

和jQuery 2.X（邊緣）

來源

2014-09-25 Metalskin

這是一個錯誤。以前只有<a>被允許作爲可點擊的子元素。圖標支持是最近的補充。請參閱問題和請求，Selectlist is empty when icon is clicked instead of text label這應該被合併到版本3.0.3的主。

來源

2014-09-25 15:45:17

啊，謝謝。我懷疑這是一個缺陷，因爲進一步的測試表明，如果我使用3.0.0，它允許選擇圖標，只是沒有在選擇結果中顯示圖標。今天要進一步調查，看看它是否有缺陷。 :-) – Metalskin 2014-09-25 20:49:56

如何允許通過下拉選擇通過圖標

回答

相關問題