手風琴塌陷，如何單擊打開和關閉？

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 個解決方案

解決方案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