Question

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

无论如何？我在下面加了一些代码

            <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文件中。删除折叠代码。（即来自链接的数据切换和数据目标属性以及来自#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

twitter bootstrap折叠选项卡问题

1 个答案: