Bootstrap 折叠需要在 Joomla 网站上点击两次才能打开

Question

在此 Joomla 页面中 http://185.25.22.156/petshop.gr/index.php/blog 您必须先按两次 "Show More" 按钮才能获得 Bootstrap 折叠插件以显示可折叠的内容。然后按钮按预期工作（show/hide 可折叠内容）。

这是我的 Joomla 文章 html

<div class="container">
    <h1 class="category">Blog
        <button type="button" class="btn-arrow" data-toggle="collapse" data-target="#subcategory">Show More
            <span class="glyphicon glyphicon-chevron-down"></span></button>
    </h1>
    <div id="subcategory" class="container collapse">
        <div id="subcategories">
            <div class="row" style="margin: 30px 0 0 0;">More content</div>
        </div>
    </div>
</div>



<script>     
    $jq1('#subcategory').on('hidden.bs.collapse', function () {
      $jq1(".btn-arrow").html('Show More <span class="glyphicon glyphicon-chevron-down"></span>');  
    });
    $jq1('#subcategory').on('shown.bs.collapse', function () {
      $jq1(".btn-arrow").html('Show Less <span class="glyphicon glyphicon-chevron-up"></span>');
    });
</script>

非常感谢任何帮助！！！

Answer 1

当您第一次点击时，该属性会添加到按钮中

aria-expanded="false"

所以 div 会折叠，如果展开。第二次点击时变成

aria-expanded="true"

div 折叠时会展开。所以只有当它变为真时 div 才会被扩展。您需要检查哪个 javascript 添加了这个额外的属性。您必须使第一次点击为真，第二次点击为假。

Answer 2

即使我设置了 aria-expanded=true 我也遇到了这个问题。如果你想让它默认打开，添加 show class 折叠内容并设置 aria-expanded=true .

Bootstrap 折叠需要在 Joomla 网站上点击两次才能打开

Bootstrap collapse needs two clicks to open on a Joomla site

jquery

joomla

collapse

twitter-bootstrap