jquery - 使用不同的按钮打开/关闭 Bootstrap Accordion

Question

希望有人能帮忙。我在这里设置了一个 jsfiddle - https://jsfiddle.net/henry_ivory/Lr3n5pjw/

这是 fiddle 的片段:

$(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');
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="product-title" style="width:100%;text-align:center;color:black;">
    <h3>Email</h3>
</div>
<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_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-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-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-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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

这就是我想要实现的目标:

如果用户单击标题(电子邮件等)或产品名称或 Logo ，则该部分中的所有面板(电子邮件等)将需要立即打开并折叠。另外，按栏上的 + 将会导致 4 个面板展开和折叠。

每个部分的面板数量可能会增加，因此需要可扩展。我想我已经很接近了，但我的 JavaScript 技能有限!

Answer 1

希望这对您有用。

<script>
$(function()
{
var boolean="true";
var timesRun = 0;
var interval = setInterval(function(){
    timesRun += 1;
$(".panel-collapse,.panel-title a").attr("aria-expanded","true");
$(".panel-collapse").addClass("in");
$(".panel-title a").addClass("collapsed");
console.log(timesRun);
    if(timesRun === 2){
$(".panel-collapse,.panel-title a").attr("aria-expanded","false");
$(".panel-collapse").removeClass("in");
$(".panel-title a").removeClass("collapsed");
        clearInterval(interval);
    } 
}, 1000); 
$(".product-title h3").click(function()
{
if(boolean)
{
$(".panel-collapse,.panel-title a").attr("aria-expanded","true");
$(".panel-collapse").addClass("in");
$(".panel-title a").addClass("collapsed");
boolean=false;
}
else
{
$(".panel-collapse,.panel-title a").attr("aria-expanded","false");
$(".panel-collapse").removeClass("in");
$(".panel-title a").removeClass("collapsed");
boolean=true;
}
});
});
</script>