在Bootstrap Collapse中一次打开一个

时间：2014-11-18 08:13:52

标签： jquery twitter-bootstrap-3

我使用stackoverflow代码编辑器创建了以下代码。

＆＃13;
＆＃13; 
$(document).ready(function(e) {
	$(".btnclink").click(function(e) {
        $(".btnclink").removeClass("btn-danger");
        $(this).addClass("btn-danger");
    	var acpanels = $("#accordion-home").find(".panel-collapse.in");
		acpanels.collapse("hide");
    });
});
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<div class="container"> 
    <br /><br />
    <div class="text-center">
    <button class="btn btnclink" data-toggle="collapse" data-target="#youtube">Open Youtube</button>&nbsp;&nbsp;
    <button class="btn btnclink" data-toggle="collapse" data-target="#google">Open Google</button>&nbsp;&nbsp;
    <button class="btn btnclink" data-toggle="collapse" data-target="#twitter">Open Twitter</button>
    <button class="btn btnclink" data-toggle="collapse" data-target="#google">Open Google</button>
    </div>
    <br /><br />
    
    <h2 class="h1 text-center">Bootstrap Collapse</h2>
    <div class="mt50">
        <div class="panel-group" id="accordion-home">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-home" href="#youtube">
                            Youtube
                        </a>
                    </h4>
                </div>
                <div id="youtube" class="panel-collapse collapse">
                    <div class="panel-body">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                    </div>
                </div>
            </div>
            
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-home" href="#google">
                            Google
                        </a>
                    </h4>
                </div>
                <div id="google" class="panel-collapse collapse">
                    <div class="panel-body">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                    </div>
                </div>
            </div>
            
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-home" href="#twitter">
                            Twitter
                        </a>
                    </h4>
                </div>
                <div id="twitter" class="panel-collapse collapse">
                    <div class="panel-body">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

在此代码中，我有两个＆＃34; Google＆＃34;按钮，当我点击第一个＆＃34;谷歌按钮＆＃34;它将打开谷歌崩溃面板。当我点击第二个＆＃34; Google按钮＆＃34; （当谷歌面板打开时），谷歌面板不应该隐藏，而应该是开放的。但目前它正在躲藏。

请检查并告知可以解决此问题的解决方案是什么？

2 个答案:

答案 0 :(得分：2)

对于按钮，您应该在javascript中手动打开面板，如果目标相同，则不要隐藏面板。
同时从按钮中删除data-toggle="collapse"，以便它不会控制崩溃。

请参阅以下修改后的代码段

＆＃13;
＆＃13; 
$(document).ready(function(e) {
    $(".btnclink").click(function(e) {
         $(".btnclink").removeClass("btn-danger");
         $(this).addClass("btn-danger");
         var target = $(this).data("target");
  
          var acpanels = $("#accordion-home").find(".panel-collapse.in").not(target);
          acpanels.collapse("hide");
          $(target).collapse("show");
    });
});
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<div class="container"> 
    <br /><br />
    <div class="text-center">
    <button class="btn btnclink" data-target="#youtube">Open Youtube</button>&nbsp;&nbsp;
    <button class="btn btnclink" data-target="#google">Open Google</button>&nbsp;&nbsp;
    <button class="btn btnclink" data-target="#twitter">Open Twitter</button>
    <button class="btn btnclink" data-target="#google">Open Google</button>
    </div>
    <br /><br />
    
    <h2 class="h1 text-center">Bootstrap Collapse</h2>
    <div class="mt50">
        <div class="panel-group" id="accordion-home">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-home" href="#youtube">
                            Youtube
                        </a>
                    </h4>
                </div>
                <div id="youtube" class="panel-collapse collapse">
                    <div class="panel-body">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                    </div>
                </div>
            </div>
            
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-home" href="#google">
                            Google
                        </a>
                    </h4>
                </div>
                <div id="google" class="panel-collapse collapse">
                    <div class="panel-body">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                    </div>
                </div>
            </div>
            
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-home" href="#twitter">
                            Twitter
                        </a>
                    </h4>
                </div>
                <div id="twitter" class="panel-collapse collapse">
                    <div class="panel-body">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

HTML是正确的。 但是使用jQuery如下：-

$(document).ready(function(e) {
  $(".btnclink").click(function(e) {
    var target = $(this).data("target");
    var acpanels = $("#accordion-home").find(".panel-collapse.show").not(target);
    acpanels.collapse("hide");
    $(target).collapse("show");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="panel-group" id="accordion-home">
  <div class="panel panel-default">
    <div id="youtube" class="panel-collapse collapse">
      <div class="panel-body"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div id="google" class="panel-collapse collapse">
      <div class="panel-body"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
    </div>
  </div>
</div>

相关问题
最新问题