元素的高度为 0px

Question

嗨，我手风琴里有 divs:

    <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>

当悬停在检查元素上的 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

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

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);
  });
});

元素的高度为 0px

Height of elements are 0px

javascript

jquery

css

height