0

ドロップダウンを介していくつかの素晴らしい選択を作成するために、ブートストラップでfueluxを使用しています。

ドロップダウンでは、font-awesome を介してアイコンを配置しています。アイコンをうまくレンダリングすることができました。選択すると、アイコンが選択済みとして含まれます。

私の問題は、アクティブ化されたドロップダウンでアイコンをクリックしたときです。選択は行われますが、何も設定されていません。ドロップダウン リストのアイコンの周りのテキストまたは空白をクリックする必要があります。

これを修正する方法を知っている人はいますか？

問題を示す JS Fiddle を次に示します。

http://jsfiddle.net/metalskin/xye7zj3n/

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 (エッジ)

4

1 に答える 1

1

バグです。以前は<a>、クリック可能な子要素としてのみ許可されていました。アイコンのサポートは最近追加されました。イシューとプル リクエストを参照してください。テキスト ラベルではなくアイコンをクリックすると、選択リストが空になります。これは、リリース 3.0.3 でマスターにマージする必要があります。

于 2014-09-25T15:45:17.973 に答える