Question

如果类collapsed不在该元素中，我需要一个div来获取另一个元素的高度（我使用bootstrap切换崩溃）。

当页面加载时它起作用但当我点击元素并删除了类collapsed时，#careheight不会改变高度。

＆＃13;

$(document).ready(function() {
  var divHeight = $("#care_and_washing").height();
  if (!$("#care_and_washing").hasClass("collapsed")) {
    $('#careheight').height(divHeight);
  } else {
    $('#careheight').height("10px");
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="care_and_washing" data-toggle="collapse" data-target="#demo" class="collapsed" style="font-family: 'NiveauGroteskMedium'; font-size: 11px; color: black;">Care & Washing</p>

<div style="cursor: default; padding-left: 13px;" id="demo" class="collapse">
  <p style="font-family: Questrial, sans-serif; font-size: 10px;">• Dry Flat</p>
  <p style="font-family: Questrial, sans-serif; font-size: 10px;">• Do Not Bleach</p>
  <p style="font-family: Questrial, sans-serif; font-size: 10px;">• Tumble Dry Low</p>
  <p style="font-family: Questrial, sans-serif; font-size: 10px;">• Iron Low</p>
  <p style="font-family: Questrial, sans-serif; font-size: 10px;">• Hand Wash</p>
</div>

<div id="careheight"></div>

＆＃13;

Answer 1

这是因为仅在文档加载时调用该函数。您还必须将其分配给点击：

$(document).ready(function(){
    changeHeight();
})

$('.element-you-want-to-click').click(function() {
    changeHeight()
});

function changeHeight() {
    var divHeight = $("#care_and_washing").height();

    if (!$("#care_and_washing").hasClass("collapsed")) {
        $('#careheight').height(divHeight);
    }

    else {
        $('#careheight').height("10px");
    }
}

如果您的初始功能有效，这应该可行。

使用jQuery动态更改元素高度

1 个答案: