0

フォームでブートストラップと折りたたみを使用しています。ユーザーは必要に応じて特定のフィールドに追加できます。しかし、キーボードのボタンタブを押して次のフィールドにジャンプすると、折りたたまれた/非表示のフィールドにタブで移動することを発見しました。

とにかくこれの周り？私は以下にいくつかのコードを含めました

            <div class="control-group">
                <label class="control-label" for="title">Title</label>
                <div class="controls">
                    <input type="text" name="title" id="title" class="input-xlarge" placeholder="Title">
                </div>
            </div>

            <hr />

            <div class="control-group">
                                    <div class="controls">
                     <a data-toggle="collapse" data-target="#add_date_div">
                        Add A Date
                    </a>
                                        </div>
            </div>

            <div id="add_date_div" class="collapse">


                <div class="control-group">
                    <label class="control-label" for="start_date">
                            Start Date:

                    </label>
                    <div class="controls">
                        <div id="collapse_date" class="input-append date form_datetime" data-date="2013-09-16T05:25:07Z" data-date-format="dd MM yyyy - hh:ii" data-link-field="dtp_input1" >
                            <input name="start_date" type="text" value="" readonly><span class="add-on"><i class="icon-th"></i></span>

                        </div>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="end_date">
                        End Date:1
                    </label>
                    <div class="controls">
                        <div id="collapse_date" class="input-append date form_datetime" data-date="2013-09-16T05:25:07Z" data-date-format="dd MM yyyy - hh:ii" data-link-field="dtp_input1" >

                            <input name="end_date" type="text" value="" readonly><span class="add-on"><i class="icon-th"></i></span>
                        </div>
                    </div>
                </div>
            </div>
4

1 に答える 1

1

折りたたまれた部分が実際に隠されていないからです。その高さオーバーフローハック。したがって、これをCSSファイルに追加します。折りたたみコードを削除します。（つまり、linkのdata-toggle属性とdata-target属性および#add_date_divのclass = "collapse"）そして、以下のようにカスタムjqueryコードとCSSを追加します。

#add_date_div {
    display:none;
}

$(function(){
    $(".add_a_date").on("click",function() {
        $("#add_date_div").slideToggle();
    });
});

ワーキングフィドル

于 2013-02-12T14:15:08.483 に答える