手风琴折叠如何在按钮点击时切换

Question

图像是这样的 1.页面加载。 2.当点击collapseTwos按钮，即（下一个）时，collapseTwos不会切换。

现场示例在这里，它可以正常工作，但在asp页面中没有 点击链接

http://www.bootply.com/DcMZxTPDI8#

所有文件都包含在内，这段代码我在masterpage child中工作.CollapseTwos总是在点击按钮时重新解锁。这个问题发生在每个页面加载，然后在它工作之后。

<div class="row">
    <div class="col-md-12">
        <div class="panel-group" id="accordion2">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <!-- <a data-toggle="collapse" data-parent="#accordion2" href="#collapseTwos"><span class="glyphicon glyphicon-th-list">
                        </span> </a> -->
                        META DATA
                    </h4>
                </div>
                <div id="collapseTwos" class="panel-collapse collapse">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-4">
                                    </div>
                                    <div class="col-md-4">
                                    </div>
                                    <div class="col-md-4">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-4">
                                    </div>
                                    <div class="col-md-4">
                                    </div>
                                    <div class="col-md-4">
                                        <a id="btn2" data-toggle="collapse" data-parent="#accordion2" href="#collapseThrees"
                                            class="btn btn-block btn-social btn-success">Next</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- _____________________________________________________________-->
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <!--   <a data-toggle="collapse" data-parent="#accordion2" href="#collapseThrees"><span class="glyphicon glyphicon-th-list">
                        </span> </a>-->
                        META DATA
                    </h4>
                </div>
                <div id="collapseThrees" class="panel-collapse collapse">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-4">
                                    </div>
                                    <div class="col-md-4">
                                    </div>
                                    <div class="col-md-4">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-4">
                                    </div>
                                    <div class="col-md-4">
                                    </div>
                                    <div class="col-md-4">
                                        <a id="btn3" data-toggle="collapse" data-parent="#accordion2" href="#collapseFours"
                                            class="btn btn-block btn-social btn-success">Next</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <!-- <a data-toggle="collapse" data-parent="#accordion2" href="#collapseFours"><span
                            class="glyphicon glyphicon-th-list"></span></a>-->META DATA
                    </h4>
                </div>
                <div id="collapseFours" class="panel-collapse collapse">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-4">
                                    </div>
                                    <div class="col-md-4">
                                    </div>
                                    <div class="col-md-4">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-4">
                                    </div>
                                    <div class="col-md-4">
                                    </div>
                                    <div class="col-md-4">
                                        <a id="btn4" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwos"
                                            class="btn btn-block btn-social btn-success">Next</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Javascript如下。

<script type="text/javascript">
   $(document).ready(function () {
       $(".btn4").click(function () {
           $("#collapseFours").collapse('toggle');
       });
       $(".btn2").click(function () {
           $("#collapseTwos").collapse('toggle');
       });
       $(".btn3").click(function () {
           $("#collapseThrees").collapse('toggle');
       });

   });
</script>

所有js文件都包含在其中

Answer 1

我复制并粘贴了在我的机器上运行的代码。为什么你评论那些锚标签？无论如何，我取消了这些，并且它是伙伴。