Question

我希望有人可以提供帮助。我在这里设置了一个jsfiddle - https://jsfiddle.net/henry_ivory/Lr3n5pjw/

这里的小提琴作为一个片段：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

如果用户点击标题（电子邮件等）或产品名称或徽标，则该部分中的所有面板（电子邮件等）将需要立即打开并折叠。同时按下条上的+将导致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>

Answer 2

试试这个。

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

Answer 3

试试这个，但请注意，您必须使用两个func currentTimeInMilliSeconds()->Int64 { return Int64(Date().timeIntervalSince1970 * 1000) } var counterInMilliSeconds = currentTimeInMilliSeconds()

来分隔您的部分

div

以下是您的HTML代码：

<script>
$(function()
{
function panel_show(curr_sec)
{
$("#" +curr_sec +" .panel-collapse").attr("aria-expanded","true");
$("#" +curr_sec +" .panel-title a").attr("aria-expanded","true");
$("#" +curr_sec +" .panel-collapse").addClass("in");
$("#" +curr_sec +" .panel-collapse").removeAttr("style")
$("#" +curr_sec +" .panel-title a").addClass("collapsed");
}
function panel_hide(curr_sec)
{
$("#" +curr_sec +" .panel-collapse").attr("aria-expanded","false");
$("#" +curr_sec +" .panel-title a").attr("aria-expanded","false");
$("#" +curr_sec +" .panel-collapse").removeClass("in");
$("#" +curr_sec +" .panel-collapse").removeAttr("style")
$("#" +curr_sec +" .panel-title a").removeClass("collapsed");
}
var bool="true";
var timesRun = 0;
var interval = setInterval(function(){
    timesRun += 1;
$(".panel-collapse,.panel-title a").attr("aria-expanded","true");
$(".panel-collapse").addClass("in");
$(".panel-collapse").removeAttr("style")
$(".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-collapse").removeAttr("style")
$(".panel-title a").removeClass("collapsed");
        clearInterval(interval);
    } 
}, 1000); 
$(".product-title h3").click(function()
{
var bool="true";
var curr_sec=' ';
var prev_sec=' ';
$(this).closest('div').parent('div').attr("id","Current_Section");
curr_sec = $(this).closest('div').parent('div').attr("id").toString();
$(this).closest('div').parent('div').siblings().attr("id","Prev_Section");
prev_sec=$(this).closest('div').parent('div').siblings().attr("id").toString();
$(this).toggleClass("Selected");
$(this).closest('div').parent('div').siblings().find("h3").removeClass("Selected")
if($(this).hasClass("Selected") === true)
{
panel_show(curr_sec);
panel_hide(prev_sec)
}
else
{
panel_hide(prev_sec)
panel_hide(curr_sec);
}
});
});
</script>

打开/关闭带有不同按钮的Bootstrap手风琴

3 个答案: