javascript - Bootstrap Accordion 折叠中的问题

Question

首先-很抱歉我的英语不好

我添加了 Accordion 。它应该作为toogle工作。 我的代码是这样的

1. 当您点击标题时，它会展开
2. 当你再次点击标题时，它会折叠
3. 如果我点击第二个标题，它会打开，但第一个仍然保持打开状态。我希望在展开任何其他内容后将其关闭。

这是我的代码。我正在使用 Bootstrap 3

    <div class="accordion" id="accordion2" >
        <div class="accordion-group">
            <div class="accordion-heading headding_new" style="height:58px;">
                <a class="accordion-toggle toggle_font" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne" >
                </a>
            </div>



            <div id="collapseOne" class="accordion-body collapse in">

                <div class="accordion-inner" style="width:83%; border:1px solid #aedddf;background: #f2f9fa;margin-left: 20px;height: 191px;margin-top: -4px;text-align:center;" >
                </br>
                    <img src="css/style/img/im2/351.png"/>
                    <div class=" chak_1" style="width:82%;border:2px solid #b31a1a;background:#fff;margin: auto;margin-top: 10px;padding: 20px;a">
                        <input type='checkbox' class="always" name="q1" value="1"onclick="document.getElementById('demo').innerHTML = '<img src=css/style/img/im2/390.png/> &nbsp  ut sit veniam nulla laboris elit, cillum in velit. Do, cillum non cupidatat adipisicing eu, officia, id, velit minim ea reprehenderit est cillum. '" id="thing-1" /><label class="" for="thing-1" > </b></label>

                    </div>
                </div>
            </div>

        </div>


        <!------------------------ 2 -----------------------------------> 


        <div class="accordion-group" style="">
            <div class="accordion-heading1 headding_new" style="height:58px;">
                <a class="accordion-toggle1 toggle_font" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                </a>
            </div>
            <div id="collapseTwo" class="accordion-body collapse">
                <div class="accordion-inner" style="width:83%; border:1px solid #aedddf;background: #f2f9fa;margin-left: 20px;height: 191px;margin-top: -4px" style="text-align:center;">
                    </br>
                    <center> <img src="css/style/img/im2/350.png"/></center>

                     <div class=" chak_1"style="width:82%;border:2px solid #b31a1a;background:#fff;margin: auto;margin-top: 10px;padding: 20px;text-align: center" >
                        <input type='checkbox' class="always2" name="q2" value="2"onclick="document.getElementById('demo').innerHTML = '<img src=css/style/img/im2/390.png/> &nbsp  Sit minim fugiat laboris labore ut amet ut. Adipisicing in mollit aliquip ex voluptate ex    '"    id="thing-2" /><label class="" for="thing-2" > </b></label>
                    </div>
                </div>
            </div>
        </div> 

Answer 1

使用此代码

<div class="bs-example">
        <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">1. What is HTML?</a>
                    </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. <a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
                    </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">2. What is Bootstrap?</a>
                    </h4>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse">
                    <div class="panel-body">
                        <p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
                    </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">3. What is CSS?</a>
                    </h4>
                </div>
                <div id="collapseThree" class="panel-collapse collapse">
                    <div class="panel-body">
                        <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>