Question

我正在尝试为我的应用创建bootstrap accordion。我的父元素中也有背景色。我的问题是，当我展开accordions时，它会扩展页面的高度，背景颜色不会覆盖扩展区域。

我的HTML

<div id='wrapper>
<accordion id='accordion' close-others="false">
    <accordion-group>
        <accordion-heading >
            <h2 class='title'>Title 1</h2>
        </accordion-heading>
        <div id="first" class="panel-collapse collapse in">
            //contents...
        </div>
    </accordion-group>
  //I have 5 to 6 accordion group. 
</accordion>
</div>

CSS：

//I used height:100% and it looks fine when the page first loaded but not after //user //expand all the accordion.

#wrapper{
    background-color: red;
    height: 100%;  
    display: block;
}

任何人都可以帮我吗？非常感谢！

Answer 1

通过documentation，我注意到你可以抓住事件shown.bs.collapse

当折叠元素对用户可见时，会触发
（将等待CSS转换完成）。

所以你可以尝试类似的东西：

$('#myCollapsible').on('shown.bs.collapse', function () {
    document.getElementById('wrapper').style.backgroundColor="red";
})

修改：如果不起作用，请尝试show.bs.collapse

如何在我的情况下设置元素的背景颜色

1 个答案: