元素的高度为0px

Question

嗨，我手风琴上有div：

    <a href="#collapse17" data-quickedit-field-id="paragraph/17/field_section_title/en/default" class="field field--name-field-section-title field--type-string field--label-hidden accordion-toggle field--item" data-parent="#accordion" data-toggle="collapse">
  <h2><strong>Accordion Header</strong></h2>
</a>
<div id="collapse17" data-quickedit-field-id="paragraph/17/field_section/en/default" class="field field--name-field-section field--type-entity-reference-revisions field--label-hidden panel-collapse collapse field--item">
    <div class="panel-body">
        <div data-quickedit-field-id="paragraph/10/field_diagram_title/en/default" class="field field--name-field-diagram-title field--type-string field--label-hidden p-1 section-title-diagram field--item background-purple" id="div">INDEPENDENT LEARNING12</div>
    </div>
</div>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

将鼠标悬停在inspect元素上的div元素上时，高度为20px。 但是我的jQuery：

    $('.section-title-diagram').each(function(){
  var $div = $("#div");
    var height = $div.height();
  var text = $div.text();
  console.log("Height: ", height);
  console.log("Text: ", text);
});

是0。当我这样做

var text = $(this).text();
console.log(text);

它确实正确吐出INDEPENDENT LEARNING12 。 我被困在为什么我的div的高度是0的问题上。 任何帮助，将不胜感激。

http://jsfiddle.net/xotu9qgj/5/

Answer 1

因为你设置

.collapse {
    display: none;
}

在你的CSS

更改为display：block

或设置$('.collapse').show(); 在您的jquery代码中。

Answer 2

http://jsfiddle.net/xotu9qgj/15/

$('#collapse17').on('shown.bs.collapse', function(){
var diagram_title = $(this).find('.section-title-diagram');
  $(diagram_title).each(function(){
    var $div = $("#div");
    var height = $div.height();
    var text = $div.text();
    console.log("Height: ", height);
    console.log("Text: ", text);
  });
});