我有一些代码需要在点击时折叠。目前始终是开放的第一个面板。我想点击其他面板中的链接打开该面板并关闭第一个面板。只有当我点击第一个面板中的链接时，才需要打开第一个面板。这是我的代码。另外当我在两个面板之间添加自定义面板时出现线条。我试过这段代码。
//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>
答案 0 :(得分：0)
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>你想要这样的东西吗？
答案 1 :(得分：0)
您可以使用解决方案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动态创建了最后 三个面板。< / p>
您需要从第一个面板中删除 .in 类。
您需要将代码从php更改为jQuery。