Bootstrap 如何创建附加折叠面板(折叠)

rqenqsqc 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(1)|浏览(206)

1）我有一个输入。2）有折叠（ accordion ）块。
我的js技能很低。有人能帮助我吗？
accordion 必须出现时，在输入的东西键入（例如）10个符号。

<input type="text" placeholder="your question">

<!-- This block must appears -->
        <div class="advanced-search" id="accordion">
            <div class="panel panel-default">         
            <div class="p-heading">
                <h4 class="title-panel panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                     <!-- no title cuz action must appear this block --> <b class="caret"></b>
                </a>
                </h4>
            </div>      
            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body">              
                <div class="ct-row ct-col-two">
                    <span class="col-1"><div class="ct-star">*</div><div class="ct-title">what job?</div></span>
                    <span class="col-2">
                        <div class="btn-group-horizontal">
                            <div class="ck-button left">
                                <label >
                                    <input type="checkbox" value="1"><span class="left">1</span>                                        
                                </label>                        
                            </div>          
                        </div>
                    </span>
                </div>      
                </div>
            </div>          
            </div>
        </div>

twitter-bootstrap

来源：https://stackoverflow.com/questions/22595375/how-to-create-additional-accordion-collapse

1条答案

按热度按时间

ss2ws0br1#

您需要jquery和bootstrap。只需使用以下命令启用 accordion 效果：

$('.collapse').collapse()

更新

此javascript将使用输入文本自动更新panel-title

$(document).ready(function(){
    $('#question').change(function(){
        var text = $(this).val()
        console.log(text)
        $('#collapseOne').collapse({
            toggle: true
        })
        $('#title').append(text)
    })
})

http://jsfiddle.net/2RV7T/1/

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 如何创建附加折叠面板(折叠)

1条答案

相关问题

热门标签

最新问答