1. 首页
  2. 问答
  3. 打开/关闭使用不同按钮的自举手风琴

打开/关闭使用不同按钮的自举手风琴

2016-09-23 80 views
1

我希望有人能够提供帮助。我有一个的jsfiddle设在这里 - https://jsfiddle.net/henry_ivory/Lr3n5pjw/打开/关闭使用不同按钮的自举手风琴

下面是小提琴作为一个片段：

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

这就是我想要实现：

structure

如果用户点击标题（电子邮件等）或产品名称或标志，然后全部该部分（电子邮件等）中的面板将需要立即打开，并崩溃。同时按下栏上的+会导致4个面板展开和折叠。

面板的数量可能在每个部分增加，因此需要进行扩展。我觉得我很接近，但我的JavaScript技能是有限的！

来源

2016-09-23 Henry

+0

小提琴是好的，但堆栈片段（'<>'工具栏按钮）使您的代码可以在现场**运行**甚至更好。当你使用外部网站时，你可能会冒险将重要信息排除在问题之外（问题不能依赖于网站外的内容）。使用堆栈片段显着提高了获得有用答案的机会。 （如同格式化你的代码，所以它不是大规模缩进，并且不在页面的右侧。） –

+0

我已经将小提琴复制到了你的问题中，并完成了格式化。 （奇怪的是，片段编辑器中的“Tidy”按钮确实不喜欢这些链接;可能值得检查，您没有未封闭标签或两个地方。） –

+0

感谢您的帮助@ T.J.Crowder！ – Henry

回答

0

希望这会对你有用。

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

来源

2016-09-23 17:10:46 Swanand

+0

感谢这个脚本非常接近，我只注意到它有一个错误，也许你可以帮忙吗？如果你打开然后关闭其中一个面板标题（比如product1），然后试着用section标题（email）打开，面板描述文本就会出现，但面板本身不会生成动画 - 任何想法都是为什么？ – Henry

+0

不知道为什么class'.panel-collapse collapse'总是有'height：0'的样式属性。我发布了另一个答案。检查它是否正常工作？ – Swanand

+0

是的，它现在正在工作，谢谢！我现在只需要有几个这样的部分，是否可以扩展这些代码？所以每个部分独立工作？ – Henry

0

试一试这个。

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

来源

2016-09-26 11:20:15 Swanand

+0

感谢您的回复，效果很好。任何想法，我可以扩大这个包括几个独立的部分独立工作？ – Henry

+0

是的。请在“.panel-collapse”之前使用您的部分名称或ID。 – Swanand

+0

这里是一个更新的小提琴 - https://jsfiddle.net/henry_ivory/Lr3n5pjw/1/ – Henry

0

试试这一个，但请注意，您必须通过使用两个div

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

这里来分隔的部分是你的HTML代码：

<div id="section1"> 
<div class="product-title" style="width:100%;text-align:center;color:black;background-color:#3c4d5a;"> 
     <h3 style="padding:5px;color:white;margin-bottom: 0;">Email</h3> 

     </div> 
     <div class="col-sm-6" style="background-color:#23ff7c;">In my Data Centre</div> 
     <div class="col-sm-6" style="background-color:#2691fa;">As a service</div> 

     <div class="col-sm-6"> 
     <div class="panel-group" id="accordion"> 
     <!-- First Panel --> 
     <div class="panel panel-default"> 
     <div class="service-logo" style="float: left;"><img src="assets/scc.jpg" class="img-responsive" style="max-height:37px;margin-right: 10px;"></div> 
     <div class="panel-heading" style="border-radius: 0px;"> 

      <h4 class="panel-title" data-toggle="collapse" data-target="#collapseOne"> 
      <div class="service-title">Product or Service Title</div> 
      </h4> 
      <input type="checkbox" style="float:right" onclick="event.stopPropagation()" /> 

     </div> 
     <div id="collapseOne" class="panel-collapse collapse"> 
      <div class="panel-body"> 
      <ul> 
      <li>Highlight One</li> 
      <li>Highlight Two</li> 
      <li>Highlight Three</li> 
      </ul> 
      <div class="service-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
      <div class="service-extras" style="">Datacentres located in: <b>France</b></div> 
      </div> 
     </div> 
     </div> 
     <!-- Second Panel --> 
     <div class="panel panel-default"> 
     <div class="service-logo" style="float: left;"><img src="assets/scc.jpg" class="img-responsive" style="max-height:37px;margin-right: 10px;"></div> 
     <div class="panel-heading" style="border-radius: 0px;"> 
      <h4 class="panel-title" data-toggle="collapse" data-target="#collapseTwo"> 
      <div class="service-title">Product or Service Title</div> 
      </h4> 
      <input type="checkbox" style="float:right" onclick="event.stopPropagation()" /> 
     </div> 
     <div id="collapseTwo" class="panel-collapse collapse"> 
      <div class="panel-body"> 
      <ul> 
      <li>Highlight One</li> 
      <li>Highlight Two</li> 
      <li>Highlight Three</li> 
      </ul> 
      <div class="service-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
      <div class="service-extras" style="">Datacentres located in: <b>France</b></div> 
      </div> 
     </div> 
     </div> 
     </div> 
     </div> 
     <div class="col-sm-6"> 
     <div class="panel-group" id="accordion"> 
     <!-- First Panel --> 
     <div class="panel panel-default"> 
     <div class="service-logo" style="float: left;"><img src="assets/scc.jpg" class="img-responsive" style="max-height:37px;margin-right: 10px;"></div> 
     <div class="panel-heading" style="border-radius: 0px;"> 
      <h4 class="panel-title" data-toggle="collapse" data-target="#collapseFour"> 
      <div class="service-title">Product or Service Title</div> 
      </h4> 
      <input type="checkbox" style="float:right" onclick="event.stopPropagation()" /> 
     </div> 
     <div id="collapseFour" class="panel-collapse collapse"> 
      <div class="panel-body"> 
      <ul> 
      <li>Highlight One</li> 
      <li>Highlight Two</li> 
      <li>Highlight Three</li> 
      </ul> 
      <div class="service-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
      <div class="service-extras" style="">Datacentres located in: <b>France</b></div> 
      </div> 
     </div> 
     </div> 
     <!-- Second Panel --> 
     <div class="panel panel-default"> 
     <div class="service-logo" style="float: left;"><img src="assets/scc.jpg" class="img-responsive" style="max-height:37px;margin-right: 10px;"></div> 
     <div class="panel-heading" style="border-radius: 0px;"> 
      <h4 class="panel-title" data-toggle="collapse" data-target="#collapseFive"> 
      <div class="service-title">Product or Service Title</div> 
      </h4> 
      <input type="checkbox" style="float:right" onclick="event.stopPropagation()" /> 
     </div> 
     <div id="collapseFive" class="panel-collapse collapse"> 
      <div class="panel-body"> 
      <ul> 
      <li>Highlight One</li> 
      <li>Highlight Two</li> 
      <li>Highlight Three</li> 
      </ul> 
      <div class="service-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
      <div class="service-extras" style="">Datacentres located in: <b>France</b></div> 
      </div> 
     </div> 
     </div> 
     </div> 
     </div> 
    </div> 
      <div id="section2"> 
      <div class="product-title" style="width:100%;text-align:center;color:black;background-color:#3c4d5a;"> 
     <h3 style="padding:5px;color:white;margin-bottom: 0;">another heading</h3> 

     </div> 
     <div class="col-sm-6" style="background-color:#23ff7c;">In my Data Centre</div> 
     <div class="col-sm-6" style="background-color:#2691fa;">As a service</div> 

     <div class="col-sm-6"> 
     <div class="panel-group" id="accordion"> 
     <!-- First Panel --> 
     <div class="panel panel-default"> 
     <div class="service-logo" style="float: left;"><img src="assets/scc.jpg" class="img-responsive" style="max-height:37px;margin-right: 10px;"></div> 
     <div class="panel-heading" style="border-radius: 0px;"> 

      <h4 class="panel-title" data-toggle="collapse" data-target="#collapseOne"> 
      <div class="service-title">Product or Service Title</div> 
      </h4> 
      <input type="checkbox" style="float:right" onclick="event.stopPropagation()" /> 

     </div> 
     <div id="collapseOne" class="panel-collapse collapse"> 
      <div class="panel-body"> 
      <ul> 
      <li>Highlight One</li> 
      <li>Highlight Two</li> 
      <li>Highlight Three</li> 
      </ul> 
      <div class="service-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
      <div class="service-extras" style="">Datacentres located in: <b>France</b></div> 
      </div> 
     </div> 
     </div> 
     <!-- Second Panel --> 
     <div class="panel panel-default"> 
     <div class="service-logo" style="float: left;"><img src="assets/scc.jpg" class="img-responsive" style="max-height:37px;margin-right: 10px;"></div> 
     <div class="panel-heading" style="border-radius: 0px;"> 
      <h4 class="panel-title" data-toggle="collapse" data-target="#collapseTwo"> 
      <div class="service-title">Product or Service Title</div> 
      </h4> 
      <input type="checkbox" style="float:right" onclick="event.stopPropagation()" /> 
     </div> 
     <div id="collapseTwo" class="panel-collapse collapse"> 
      <div class="panel-body"> 
      <ul> 
      <li>Highlight One</li> 
      <li>Highlight Two</li> 
      <li>Highlight Three</li> 
      </ul> 
      <div class="service-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
      <div class="service-extras" style="">Datacentres located in: <b>France</b></div> 
      </div> 
     </div> 
     </div> 
     </div> 
     </div> 
     <div class="col-sm-6"> 
     <div class="panel-group" id="accordion"> 
     <!-- First Panel --> 
     <div class="panel panel-default"> 
     <div class="service-logo" style="float: left;"><img src="assets/scc.jpg" class="img-responsive" style="max-height:37px;margin-right: 10px;"></div> 
     <div class="panel-heading" style="border-radius: 0px;"> 
      <h4 class="panel-title" data-toggle="collapse" data-target="#collapseFour"> 
      <div class="service-title">Product or Service Title</div> 
      </h4> 
      <input type="checkbox" style="float:right" onclick="event.stopPropagation()" /> 
     </div> 
     <div id="collapseFour" class="panel-collapse collapse"> 
      <div class="panel-body"> 
      <ul> 
      <li>Highlight One</li> 
      <li>Highlight Two</li> 
      <li>Highlight Three</li> 
      </ul> 
      <div class="service-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
      <div class="service-extras" style="">Datacentres located in: <b>France</b></div> 
      </div> 
     </div> 
     </div> 
     <!-- Second Panel --> 
     <div class="panel panel-default"> 
     <div class="service-logo" style="float: left;"><img src="assets/scc.jpg" class="img-responsive" style="max-height:37px;margin-right: 10px;"></div> 
     <div class="panel-heading" style="border-radius: 0px;"> 
      <h4 class="panel-title" data-toggle="collapse" data-target="#collapseFive"> 
      <div class="service-title">Product or Service Title</div> 
      </h4> 
      <input type="checkbox" style="float:right" onclick="event.stopPropagation()" /> 
     </div> 
     <div id="collapseFive" class="panel-collapse collapse"> 
      <div class="panel-body"> 
      <ul> 
      <li>Highlight One</li> 
      <li>Highlight Two</li> 
      <li>Highlight Three</li> 
      </ul> 
      <div class="service-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
      <div class="service-extras" style="">Datacentres located in: <b>France</b></div> 
      </div> 
     </div> 
     </div> 
     </div> 
     </div> 
    </div>

来源

2016-09-26 15:44:37 Swanand

+0

只需参考上面的js和HTML代码:) – Swanand

+0

非常感谢！我很感激你的时间，期待着这 – Henry

+0

随时欢迎:) – Swanand

相关问题

 相关问题