bootstrap手風琴折疊，jquery，js，bootstrap
[英]bootstrap accordion collapse, jquery, js, bootstrap
問題描述
我有一些代碼需要在點擊時折疊。 當前總是打開第一個面板。 我想要在其他面板上單擊鏈接時打開該面板並關閉第一個面板。 僅當我單擊第一面板中的鏈接時，第一面板才需要打開。 這是我的代碼。 另外，當我在兩個面板之間添加自定義面板時會出現線。 我已經嘗試過使用此代碼。
//jquery
$("a").on('click',function(e){
$ (this).addClass('collapse in');
});
//menu
<div class="container"><br>
<div class="row">
<div class="col-sm-3 col-md-3">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-folder-close">
</span>Users</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<table class="table">
<tr>
<td>
<span class="glyphicon glyphicon-pencil text-primary" ></span><a href="add.php">Users</a>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-flash text-success"></span><a href="user.php?all">View users</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-th">
</span>Campaigns</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr>
<td>
<a href="#">Orders</a> <span class="label label-success">$ 320</span>
</td>
</tr>
<tr>
<td>
<a href="#">Invoices</a>
</td>
</tr>
<tr>
<td>
<a href="#">Shipments</a>
</td>
</tr>
<tr>
<td>
<a href="#">Tex</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-user">
</span>Statistics</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr>
<td>
<a href="#">Change Password</a>
</td>
</tr>
<tr>
<td>
<a href="#">Something</a> <span class="label label-info">5</span>
</td>
</tr>
<tr>
<td>
<a href="#">Import/Export</a>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-trash text-danger"></span><a href="#" class="text-danger">
Delete Account</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-file">
</span>Account</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr>
<td>
<span class="glyphicon glyphicon-usd"></span><a href="change_pass.php">Change password</a>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-user"></span><a href="#">Notifications</a>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-user"></span><a href="mcccp.php">View Acc</a>
</td>
</tr>
</table>
</div>
</div>
<!--my custom panel-->
<?php
if ($_SESSION["userStatus"] == "superadmin") {
echo '<div class="panel panel-default" style="margin-top: 5px;">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFive">
<span class="glyphicon glyphicon-th"></span>
Adminn
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr></tr>
<tr>
<td>
<span class="glyphicon glyphicon-usd"></span>
<a href="admin.php">Admin Options</a>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-user"></span>
<a href="admin2.php?all">Options</a>
</td>
</tr>
</table>
</div>
</div>
</div>';
echo '<div class="panel panel-default" style="margin-top: 5px;">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseSix">
<span class="glyphicon glyphicon-th"></span>
Other panel
</a>
</h4>
</div>
<div id="collapseSix" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr></tr>
<tr>
<td>
<span class="glyphicon glyphicon-user"></span>
<a href="mc.php">Create Account</a>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-user"></span>
<a href="mcv.php">View Accounts</a>
</td>
</tr>
</table>
</div>
</div>
</div>';
echo '<div class="panel panel-default" style="margin-top: 5px;">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseSeven">
<span class="glyphicon glyphicon-th"></span>
Other Panel 2
</a>
</h4>
</div>
<div id="collapseSeven" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr></tr>
<tr>
<td>
<span class="glyphicon glyphicon-user"></span>
<a href="vs.php">Create Account</a>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-user"></span>
<a href="vsss.php">View Accounts</a>
</td>
</tr>
</table>
</div>
</div>
</div>';
}
?>
<!--end custom panel-->
</div>
</div>
</div>
</div>
</div>
2 個解決方案
解決方案1
0 2017-08-03 09:02:45
var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function(){ this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } } }
button.accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } button.accordion.active, button.accordion:hover { background-color: #ddd; } div.panel { padding: 0 18px; display: none; background-color: white; }
<html> <head> </head> <body> <h2>Accordion</h2> <button class="accordion">Section 2</button> <div class="panel"> <button class="accordion">Section2.1</button> <div class="panel"> <p> <h3><center>section2.1 content</center></h3> </p> </div> </div> <button class="accordion">Section 3</button> <div class="panel"> <p><h2>section3</h2></p> </div> </body> </html>
你想要這樣的東西嗎？
解決方案2
0 2017-08-03 09:15:48
在這里您可以找到解決方案https://jsfiddle.net/714fymdq/
var dynamicPanel1 = `<div class="panel panel-default" style="margin-top: 5px;"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFive"> <span class="glyphicon glyphicon-th"></span> Adminn </a> </h4> </div> <div id="collapseFive" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr></tr> <tr> <td> <span class="glyphicon glyphicon-usd"></span> <a href="admin.php">Admin Options</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-user"></span> <a href="admin2.php?all">Options</a> </td> </tr> </table> </div> </div> </div>`; var dynamicPanel2 = `<div class="panel panel-default" style="margin-top: 5px;"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseSix"> <span class="glyphicon glyphicon-th"></span> Other panel </a> </h4> </div> <div id="collapseSix" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr></tr> <tr> <td> <span class="glyphicon glyphicon-user"></span> <a href="mc.php">Create Account</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-user"></span> <a href="mcv.php">View Accounts</a> </td> </tr> </table> </div> </div> </div>`; var dynamicPanel3 = `<div class="panel panel-default" style="margin-top: 5px;"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseSeven"> <span class="glyphicon glyphicon-th"></span> Other Panel 2 </a> </h4> </div> <div id="collapseSeven" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr></tr> <tr> <td> <span class="glyphicon glyphicon-user"></span> <a href="vs.php">Create Account</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-user"></span> <a href="vsss.php">View Accounts</a> </td> </tr> </table> </div> </div> </div>` $('#accordion').append(dynamicPanel1, dynamicPanel2, dynamicPanel3);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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.7/js/bootstrap.min.js"></script> <div class="container"><br> <div class="row"> <div class="col-sm-3 col-md-3"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-folder-close"> </span>Users</a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr> <td> <span class="glyphicon glyphicon-pencil text-primary" ></span><a href="add.php">Users</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-flash text-success"></span><a href="user.php?all">View users</a> </td> </tr> </table> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-th"> </span>Campaigns</a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr> <td> <a href="#">Orders</a> <span class="label label-success">$ 320</span> </td> </tr> <tr> <td> <a href="#">Invoices</a> </td> </tr> <tr> <td> <a href="#">Shipments</a> </td> </tr> <tr> <td> <a href="#">Tex</a> </td> </tr> </table> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-user"> </span>Statistics</a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr> <td> <a href="#">Change Password</a> </td> </tr> <tr> <td> <a href="#">Something</a> <span class="label label-info">5</span> </td> </tr> <tr> <td> <a href="#">Import/Export</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-trash text-danger"></span><a href="#" class="text-danger"> Delete Account</a> </td> </tr> </table> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-file"> </span>Account</a> </h4> </div> <div id="collapseFour" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr> <td> <span class="glyphicon glyphicon-usd"></span><a href="change_pass.php">Change password</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-user"></span><a href="#">Notifications</a> </td> </tr> <tr> <td> <span class="glyphicon glyphicon-user"></span><a href="mcccp.php">View Acc</a> </td> </tr> </table> </div> </div> <!--my custom panel--> </div> </div> </div> </div> </div>
由於我無法在jsfiddle中使用php， 因此我使用jQuery 動態創建了最后 三個面板 。
您需要從第一個面板中刪除.in類。
您需要將代碼從jQuery更改為php 。
Bootstrap 5 accordion active element disable collapse 無 jQuery
[英]Bootstrap 5 accordion active element disable collapse without jQuery
Bootstrap：Accordion Collapse停止使用Bootstrap 2.0.3
[英]Bootstrap: Accordion Collapse stopped working with Bootstrap 2.0.3
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.