Question

在这个Joomla页面中http://185.25.22.156/petshop.gr/index.php/blog 你必须先按两次＆＃34;显示更多＆＃34;按钮获取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崩溃，则会扩展。因此，只有当它变为真时，div才会扩展。您需要检查哪个javascript正在添加此额外属性。你必须使第一次点击为真，第二次为假。

Answer 2

即使我设置了 aria-expanded=true，我也遇到了这个问题。如果您希望它默认打开，请添加 show 类以折叠内容并设置 aria-expanded=true。

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

2 个答案: