Question

所以我正在使用bootstrap崩溃，当用户点击链接时，我想展开div并计算其高度并将该高度添加到h3。我的问题是，当我点击链接并展开div时，我得到0，当我再次点击它在div中折叠然后它得到它的真实高度。有什么帮助吗？

$(document).ready(function(){
    $("#open_tech").click(function(){
    var height = $(".price_list").height();
        $('.left_side_menu h3').css('height',height);
        console.log(height);
    })
});

Answer 1

你想要的是shown.bs.collapse事件

当崩溃元素对用户可见时将触发此事件（将等待CSS转换完成）。

$('.price_list').on('shown.bs.collapse', function () {
    var height = $(".price_list").height();
    $('.left_side_menu h3').css('height', height);
    console.log(height);
})

.left_side_menu h3 {
  background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<button data-toggle="collapse" data-target=".price_list">Collapsible</button>

<div class="collapse price_list">
  Lorem ipsum dolor text.... Lorem ipsum dolor text....
  <br>
  <br>
</div>

<br>
<div class="left_side_menu">
  <h3>Some header text</h3>
</div>

如何在扩展之前获得div的高度

1 个答案: