Question

我正在尝试以下代码来显示手风琴。当我点击左手风琴时，它在右侧创造了我不想要的空间。请帮助我的方式，当我点击左手风琴不应该影响右侧以及下面包含不应该影响。

    <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>

Answer 1

像打击

一样更改你的html结构

＆＃13;

<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>

＆＃13;

当我点击左手风琴时，它在右手风琴中创造了空间

1 个答案: