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

Question

Accordion/collapse not working as i want, here's my code: 手风琴/折叠无法正常工作，这是我的代码：

Here's the view with the JS in script tags: 这是脚本标记中带有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>

Above that I have in the head: 高于我的头脑：

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

The way it's currently working is, load page, accordion/collapse is closed, click to open. 它当前的工作方式是，加载页面，关闭手风琴/折叠，单击以打开。 To close, you need to click away from it on the page for it to close. 要关闭它，您需要在页面上单击它以使其关闭。

I want it to click open and close only when i click the accordion/collpase itself. 我希望它仅在单击手风琴/ collpase本身时单击打开和关闭。 How do i set this up? 我该如何设置？

I looked around and found this: https://codepen.io/delonnkoh/pen/LRWgPP Which is essentially how i would like it to work. 我环顾四周，发现了这一点： https : //codepen.io/delonnkoh/pen/LRWgPP从本质上讲，我希望它能正常工作。

I have tried all the results on stackoverflow and none seem to work. 我已经尝试了所有关于stackoverflow的结果，但是似乎都没有。 The current code above is the closest i have come to successfully doing this but it closes only on an "off-click" and not when i click the accordion itself. 上面的当前代码是我成功完成此操作的最接近的代码，但是它仅在“单击”时关闭，而在我单击手风琴本身时不会关闭。

I've tried removing the links within the header since they're in my application, but same thing (so they're not needed). 由于它们在我的应用程序中，因此我尝试了删除标头中的链接，但是还是一样（因此不需要它们）。

I'm assuming my JS needs some help. 我假设我的JS需要一些帮助。 Anyone have the solution for this? 有人对此有解决方案吗？

Answer 1

If you are using jQuery, you may use something like this; 如果您使用的是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 个解决方案

解决方案1
0 2018-10-15 02:14:55

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

问题描述

1 个解决方案

解决方案1 0 2018-10-15 02:14:55

解决方案1
0 2018-10-15 02:14:55