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

Question

在这个Joomla页面http://185.25.22.156/petshop.gr/index.php/blog中，你必须首先按下两次“显示更多”按钮来让Bootstrap折叠插件显示可折叠的内容。然后，该按钮只需单击一次即可正常工作(显示/隐藏可折叠内容)。

这是我的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被折叠，它将被展开。因此，只有当它变为true时，div才会展开。您需要检查是哪个javascript添加了这个额外的属性。您必须使第一次单击为真，第二次单击为假。

Answer 2

我有这个问题，即使我设置了你想要的aria-expanded=true.if，默认情况下它是打开的，添加show类来折叠内容并设置aria-expanded=true。