我如何处理bootstrap div崩溃和扩展的奇怪行为

时间:2016-09-30 11:36:34

标签: javascript jquery html css twitter-bootstrap

您好我刚刚创建了一个与此主题相关的问题。但我在下面发现了引导程序的奇怪行为:(请查看我之前的问题:https://stackoverflow.com/questions/39786787/how-to-handle-collapse-expand-all-with-single-click-accordion-work-together-in-b

我有2个不同的小组,因为我在它们之间添加了一些段落。

 <div class="row extra-left-padding-0">

<div class="spaced-columns">
    <div class="container">


        <button class="collapse-init">Click to disable accordion behavior</button>
        <br />
    </div>

    <div class="container">
        <div class="row">
            <div class="panel panel-default">
                <div class="panel-body">

                    <legend class="col-xs-6 col-sm-5 control-label">1-Yönetici Degerlendirme</legend>
                    <div class="col-xs-6 col-sm-2 col-sm-height col-sm-top">
                        <div id="g0"></div>

                    </div>
                    <div class="clearfix visible-xs-block"></div>
                    <div class="col-xs-4 col-sm-3">
                        <h4>Axp/10 : 
                          </h4>
                    </div>
                    <div class="col-xs-2 col-sm-2">

                    </div>
                </div>
            </div>
        </div>
        <div class="panel-group" id="accordion0">
            <div class="panel panel-default">
                <div class="panel-heading" data-parent="#accordion0" data-target="#collapse0" data-toggle="collapse" role="button">
                    <h4 class="panel-title accordion-toggle">1-Yönetici Değerlendirme Kriterler
      <i class="fa fa-chevron-down fa pull-right"></i>
                    </h4>
                </div>
                <div class="panel-collapse collapse" id="collapse0" role="tabpanel">
                    <div class="panel-body">
                        test0

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

    <div class="container">


        <div class="row">
            <div class="panel panel-default">
                <div class="panel-body">

                    <legend class="col-xs-6 col-sm-5 control-label">2-Piyasa Ve Şirket içi İstihbarat</legend>
                    <div class="col-xs-6 col-sm-2 col-sm-height col-sm-top">
                        <div id="g1"></div>


                    </div>
                    <div class="clearfix visible-xs-block"></div>
                    <div class="col-xs-6 col-sm-3">
                        <h4>Axp/10 : 
                        </h4>
                    </div>
                    <div class="col-xs-2 col-sm-2">

                    </div>
                </div>
            </div>
        </div>
        <div class="panel-group" id="accordion1">
            <div class="panel panel-default">
                <div class="panel-heading" data-parent="#accordion1" data-target="#collapse1" data-toggle="collapse" role="button">
                    <h4 class="panel-title">2-Piyasa Ve Şirket içi İstihbarat Kriterler
      <i class="fa fa-chevron-down fa pull-right"></i>
                    </h4>
                </div>
                <div  class="panel-collapse collapse" id="collapse1" role="tabpanel">
                    <div class="panel-body">
                        TEST
                    </div>
                </div>
            </div>
        </div>
    </div>

    </div>
    </div>

看看这种奇怪的行为:

(这个没有用。没有崩溃。)

  $('#accordion1').on('show.bs.collapse', function () {
            $('#collapse1').collapse('hide');
            console.log('collpase0 is clicked');
        });

但如果我改变了这个;

 $('#accordion1').on('show.bs.collapse', function () {
            $('#collapse0').collapse('hide');
            console.log('collpase0 is clicked');
        });

我将collapse1 id设为collapse0,如果我点击accrodion1,折叠对accordion0有效,但如果我这样做:

  $('#accordion1').on('show.bs.collapse', function () {
            $('#collapse1').collapse('hide');
            console.log('collpase0 is clicked');
        });

它正在崩溃,但没有成功不工作我怎么能解决它?如果我点击accordion0它应该折叠它的内容。

1 个答案:

答案 0 :(得分:1)

让我说对了,你试图创建一个带有段落的手风琴效果,这样如果你打开一个面板,另一个面板应该关闭?是的,如果是这样的话,那么你需要简单地交替崩溃动作。这是我用你的代码创建的小提琴,展示了这一点 https://jsfiddle.net/icerebellion/c59jk54h/1/

$('#accordion0').on('show.bs.collapse', function() {
     $('#collapse1').collapse('hide');
     console.log('collpase0 is clicked');
   });
   $('#accordion1').on('show.bs.collapse', function() {
     $('#collapse0').collapse('hide');
     console.log('collpase1 is clicked');
   });