Jquery 手风琴折叠如何不在按钮点击上切换

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

这里是一个实时示例，它可以很好地工作，但在asp页面中却不行 跟随链接

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

所有的文件都包括在内，这段代码我正在母版子版中工作。在点击按钮时，折叠网络总是保持不变。每次加载页面时都会出现这个问题，然后在它工作之后

<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文件都包含在其中

我复制并粘贴了你的代码，它在我的机器上运行。你为什么评论那些锚定标签？不管怎样，我取消了这些标记，它就可以正常工作了。

还要检查加载jquery是否按顺序引导我没有将这些锚定标记用作链接，而是使用按钮来折叠它们。您的建议很有效，但我希望它在单击按钮时执行功能，我的所有jquery都可以正常工作。谢谢你的建议@哈斯塔帕斯塔