Question

我面临一个问题，我创造了四个手风琴左侧两个（LHS1，LHS2）和右侧两个（RHS1，RHS2）手风琴。现在我扩展LHS1然后RHS1也自动打开。现在我打开了LHS2然后RHS2在LHS2打开时自动打开LHS1顶部崩溃但RHS1没有崩溃。

<div class="row">
    <div class="col-sm-6">
        <div class="panel-group" id="LHS">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a id="L1" class="collapsed collapse collapse-link-1" data-toggle="collapse" data-parent="#" href="#collapseOne_L">
                            LHS1
                        </a>
                    </h4>
                </div><!--/.panel-heading -->
                <div id="collapseOne_L" class="panel-collapse collapseOne collapse">
                    <div class="panel-body">
                    Welcome LHS1
                    </div><!--/.panel-body -->
                </div><!--/.panel-collapse -->
            </div><!-- /.panel -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a id="L2" class="collapsed collapse collapse-link-2" data-toggle="collapse" data-parent="#" href="#collapseTwo_L">
                            LHS2
                        </a>
                    </h4>
                </div><!--/.panel-heading -->
                <div id="collapseTwo_L" class="panel-collapse collapseTwo collapse">
                    <div class="panel-body">
                    Welcome LHS2
                    </div><!--/.panel-body -->
                </div><!--/.panel-collapse -->
            </div><!-- /.panel --> 
        </div>
    </div>
    <div class="col-sm-6">
        <div class="panel-group" id="RHS">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a id="L1" class="collapsed collapse collapse-link-1" data-toggle="collapse" data-parent="#" href="#collapseOne_R">
                            RHS1
                        </a>
                    </h4>
                </div><!--/.panel-heading -->
                <div id="collapseOne_R" class="panel-collapse collapseOne collapse">
                    <div class="panel-body">
                    Welcome RHS1
                    </div><!--/.panel-body -->
                </div><!--/.panel-collapse -->
            </div><!-- /.panel -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a id="L2" class="collapsed collapse collapse-link-2" data-toggle="collapse" data-parent="#" href="#collapseTwo_R">
                            RHS2
                        </a>
                    </h4>
                </div><!--/.panel-heading -->
                <div id="collapseTwo_R" class="panel-collapse collapseTwo collapse">
                    <div class="panel-body">
                    Welcome RHS2
                    </div><!--/.panel-body -->
                </div><!--/.panel-collapse -->
            </div><!-- /.panel --> 
        </div>
    </div>
</div>

$(document).on('click', '.collapse-link-1', function (e) {
//alert("open accordions-->");
$('.collapseOne').collapse('toggle');
});

$(document).on('click', '.collapse-link-2', function (e) {
//alert("open accordions-->");
$('.collapseTwo').collapse('toggle');
});

Answer 1

此处您不需要Javascript代码。

Workign Fiddle

所有这些都可以通过bootstrap的属性配置来处理。

请注意，您的href代码中包含<a>属性。 ~~文档说明~~此collapse插件的源代码声明href应包含目标元素的selector。

请注意

<a id="L1" class="..." data-toggle="collapse" data-parent="#" href=".collapseOne">

我已将href属性从#collapseOne_L更改为.collapseOne

href collapseOne_R collapseTwo_L，collapseTwo_R和<div class="row"> <div class="col-sm-6"> <div class="panel-group" id="LHS"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a id="L1" class="collapsed collapse-link-1" data-toggle="collapse" data-parent="#" href=".collapseOne"> LHS1 </a> </h4> </div> <div id="collapseOne_L" class="panel-collapse collapseOne collapse"> <div class="panel-body"> Welcome LHS1 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a id="L2" class="collapsed collapse-link-2" data-toggle="collapse" data-parent="#" href=".collapseTwo"> LHS2 </a> </h4> </div> <div id="collapseTwo_L" class="panel-collapse collapseTwo collapse"> <div class="panel-body"> Welcome LHS2 </div> </div> </div> </div> </div> <div class="col-sm-6"> <div class="panel-group" id="RHS"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a id="L1" class="collapsed collapse-link-1" data-toggle="collapse" data-parent="#" href=".collapseOne"> RHS1 </a> </h4> </div> <div id="collapseOne_R" class="panel-collapse collapseOne collapse"> <div class="panel-body"> Welcome RHS1 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a id="L2" class="collapsed collapse-link-2" data-toggle="collapse" data-parent="#" href=".collapseTwo"> RHS2 </a> </h4> </div> <div id="collapseTwo_R" class="panel-collapse collapseTwo collapse"> <div class="panel-body"> Welcome RHS2 </div> </div> </div> </div> </div>

已经做了同样的事情

此代码可以正常工作，而无需显式隐藏/显示使用javascript。

range

Answer 2

<击>的 Fiddle DEMO

<击>
~~您已撰写click event，但未指定正确的元素，您需要通过引用点击的element或搜索点击的元素{{{ 1}}~~

<强>更新

检查panel-body中的内联评论了解详情

<强> Fiddle DEMO

JS

$(document).on('click', '.collapse-link-1', function (e) { if($("#collapseTwo_L").hasClass('in')) //if second accordion is open { $('#collapseTwo_R,#collapseTwo_L').collapse('toggle'); //toggle second accordion of both right and left } $('.collapseOne').collapse('toggle'); }); $(document).on('click', '.collapse-link-2', function (e) { if($("#collapseOne_L").hasClass('in'))//if first accordion is open { $('#collapseOne_R,#collapseOne_L').collapse('toggle'); //toggle first accordion of both right and left } $('.collapseTwo').collapse('toggle'); });

如何在jquery

2 个答案: