javascript - jquery 函数仅在第一次单击时才能正常工作

Question

我有这个功能

$(".plusmenus1").on('click', function() {
    $('.plusmenus1 i').toggleClass("fa-plus fa-minus");
    $("#care_and_washing").toggleClass("collapsed_MB  ");
    changeHeight();
});
$(".plusmenus2").on('click', function() {
    $('.plusmenus2 i').toggleClass("fa-plus fa-minus");
});

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

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

    if (!$("#care_and_washing").hasClass("collapsed_MB")) {
        $('#careheight').css('height', divHeight + 'px');
    } else {
        $('#careheight').css('height', '10px');
    }
}

它可以工作，但只有在第一次点击后才能正确获取 var divHeight = $("#care_and_washing").height() + $("#demo").height();它获取的 var 没有 +，因此它仅添加 #care_and_washing

的 height

HTML(我会尝试仅添加需要的内容)

<div class="plusmenus1"><i data-toggle="collapse" data-target="#demo" style="float: left; position: relative; top: 3px; padding-right: 5px; color: black; font-size: 10px;" class="fa fa-plus collapsed" aria-hidden="true"></i>
<p id="care_and_washing" data-toggle="collapse" data-target="#demo" class="collapsed collapsed_MB" style="font-family: 'NiveauGroteskMedium'; font-size: 11px; color: black;">Care & Washing</p>
</div>
<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>

Answer 1

Hidden_​​Element.height() 和 Hidden_​​Element.width() 将为 0 因此您需要显示以获取高度并再次隐藏，例如这个

function changeHeight() {
  var care_h = $("#care_and_washing").height();
  var demo_h = $("#demo").height();

  demo_h = demo_h == 0 ? $("#demo").show().height() : demo_h;

  $("#demo").hide();

  var divHeight = care_h + demo_h;

  if (!$("#care_and_washing").hasClass("collapsed_MB")) {
    $('#careheight').css('height', divHeight + 'px');
  } else {
    $('#careheight').css('height', '10px');
  }
}