我正在尝试以下代码来显示手风琴。当我点击左手风琴时，它在右侧创造了我不想要的空间。请帮助我的方式，当我点击左侧手风琴时，不应该影响右侧，以及下面包含的不应该影响。
<html>
<head>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="accordion-group" id="accordion">
<div class="accordion-panel">
<div class="heading">
<h4 class="title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1"><i class="glyphicon glyphicon-plus"></i>Antipasti</a>
</h4>
</div>
<div id="panel1" class="panel-collapse collapse">
<div class="panel-body">
hello
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="accordion-group" id="accordion">
<div class="accordion-panel">
<div class="heading">
<h4 class="title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="glyphicon glyphicon-plus"></i>Antipasti</a>
</h4>
</div>
<div id="panel2" class="panel-collapse collapse">
<div class="panel-body">
hello
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="accordion-group" id="accordion">
<div class="accordion-panel">
<div class="heading">
<h4 class="title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="glyphicon glyphicon-plus"></i>Antipasti</a>
</h4>
</div>
<div id="panel3" class="panel-collapse collapse">
<div class="panel-body">
hello
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="accordion-group" id="accordion">
<div class="accordion-panel">
<div class="heading">
<h4 class="title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel4"><i class="glyphicon glyphicon-plus"></i>Antipasti</a>
</h4>
</div>
<div id="panel4" class="panel-collapse collapse">
<div class="panel-body">
hello
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var selectIds =$('#panel1,#panel2,#panel3,#panel4');
$(function ($) {
selectIds.on('hidden.bs.collapse show.bs.collapse', function () {
$(this).prev().find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
})
});
</script>
</div>
</body>
</html>
像blow-一样更改html结构
<html>
<head>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="accordion-group" id="accordion">
<div class="accordion-panel">
<div class="heading">
<h4 class="title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1"><i class="glyphicon glyphicon-plus"></i>Antipasti</a>
</h4>
</div>
<div id="panel1" class="panel-collapse collapse">
<div class="panel-body">
hello
</div>
</div>
</div>
</div>
<div class="accordion-group" id="accordion">
<div class="accordion-panel">
<div class="heading">
<h4 class="title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="glyphicon glyphicon-plus"></i>Antipasti</a>
</h4>
</div>
<div id="panel2" class="panel-collapse collapse">
<div class="panel-body">
hello
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="accordion-group" id="accordion">
<div class="accordion-panel">
<div class="heading">
<h4 class="title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="glyphicon glyphicon-plus"></i>Antipasti</a>
</h4>
</div>
<div id="panel3" class="panel-collapse collapse">
<div class="panel-body">
hello
</div>
</div>
</div>
</div>
<div class="accordion-group" id="accordion">
<div class="accordion-panel">
<div class="heading">
<h4 class="title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel4"><i class="glyphicon glyphicon-plus"></i>Antipasti</a>
</h4>
</div>
<div id="panel4" class="panel-collapse collapse">
<div class="panel-body">
hello
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var selectIds =$('#panel1,#panel2,#panel3,#panel4');
$(function ($) {
selectIds.on('hidden.bs.collapse show.bs.collapse', function () {
$(this).prev().find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
})
});
</script>
</div>
</body>
</html>