jquery - 推特 Bootstrap 折叠选项卡问题

Question

我在表单上使用 bootstrap 和 collapse - 允许用户根据需要添加某些字段。但我发现，如果我按下键盘按钮选项卡以跳转到下一个字段，它将跳转到折叠/隐藏字段。

不管怎样？我在下面包含了一些代码

            <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>

Answer 1

因为折叠的部分实际上并没有隐藏。这是一个高度溢出黑客。所以将它添加到您的 CSS 文件中。删除折叠代码。 (即来自链接的 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();
    });
});

Working Fiddle