Bootstrap可折叠面板不能在另一个面板开口上折叠

我正在使用Bootstrap折叠来实现可折叠面板，如fiddle所示我想知道是否可以在打开另一个面板的同时打开一个面板并将面板只在点击自己面板的箭头时关闭。Bootstrap可折叠面板不能在另一个面板开口上折叠

我已经把代码的CSS部分。

.panel-heading .accordion-toggle:after { 
/* symbol for "opening" panels */ 
font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */ 
content: "\e114"; /* adjust as needed, taken from bootstrap.css */ 
float: right;  /* adjust as needed */ 
color: grey;   /* adjust as needed */ 
} 
.panel-heading .accordion-toggle.collapsed:after { 
/* symbol for "collapsed" panels */ 
content: "\e080"; /* adjust as needed, taken from bootstrap.css */ 
}

来源

2017-05-17 The_Outsider

删除锚标签上的data-parent属性。

.panel-heading .accordion-toggle:after { 
 
    /* symbol for "opening" panels */ 
 
    font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */ 
 
    content: "\e114"; /* adjust as needed, taken from bootstrap.css */ 
 
    float: right;  /* adjust as needed */ 
 
    color: grey;   /* adjust as needed */ 
 
} 
 
.panel-heading .accordion-toggle.collapsed:after { 
 
    /* symbol for "collapsed" panels */ 
 
    content: "\e080"; /* adjust as needed, taken from bootstrap.css */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
    
 
<h2>Multiple Slides:</h2> 
 

 
<div class="panel-group" id="accordion2"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
     <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne"> 
 
      Group #1 
 
     </a> 
 
     </h4> 
 
    </div> 
 
    <div id="collapseOne" class="panel-collapse collapse in"> 
 
     <div class="panel-body"> 
 
     Test 1 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
     <a class="accordion-toggle" data-toggle="collapse" href="#collapseTwo"> 
 
      Group #2 
 
     </a> 
 
     </h4> 
 
    </div> 
 
    <div id="collapseTwo" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
     Test 2 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
     <a class="accordion-toggle" data-toggle="collapse" href="#collapseThree"> 
 
      Group #3 
 
     </a> 
 
     </h4> 
 
    </div> 
 
    <div id="collapseThree" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
     Test 3 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-05-17 13:55:38

Bootstrap可折叠面板不能在另一个面板开口上折叠

回答

相关问题