Question

手风琴/折叠无法正常工作，这是我的代码：

这是在脚本标签中包含JS的视图：

<div id="accordion" class="panel-group">
    <div class="panel">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a href="#panelBodyOne" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion">Select Up To 3 Categories</a>
            </h4>
        </div>
        <div id="panelBodyOne" class="panel-collapse collapse">
            <div class="panel-body">
                <%= form.collection_check_boxes :category_id, Category.all, :id, :name, :prompt => "Select a Category" %>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).on('click', function() {
        $('.collapse').collapse('hide');
    })
</script>

在我的头上：

<head>

<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>

</head>

当前的工作方式是，加载页面，关闭手风琴/折叠，单击以打开。要关闭，您需要在页面上单击它以使其关闭。

仅当我单击手风琴/ collpase本身时，我希望它单击打开和关闭。我该如何设置？

我环顾四周，发现：https://codepen.io/delonnkoh/pen/LRWgPP 本质上，这就是我希望它能工作的方式。

我已经尝试了所有关于stackoverflow的结果，但似乎都没有效果。上面的当前代码是我成功完成此操作的最接近的代码，但是它仅在“单击”时关闭，而在我单击手风琴本身时不会关闭。

我尝试删除标头中的链接，因为它们在我的应用程序中，但是还是一样（因此不需要它们）。

我假设我的JS需要一些帮助。有人有解决方案吗？

Answer 1

如果您使用的是jQuery，则可以使用类似的内容；

	$('.collapse').on('click', function() { //Add click handler on the parent div
        $('.panel-body').toggle('hide'); //Make the child hide or show when parent is clicked.
    });

手风琴塌陷，如何单击打开和关闭？

1 个答案: