javascript - 如何获得此 Accordion 样式显示/隐藏功能的隐藏 div 高度？

Question

我正在努力让这个节目顺利进行。当我简单地使用

$(this).find(".less").toggleClass("more");

它运行良好，但它很不稳定，所以我尝试为高度添加 .animate 但是不可能在 jQuery 中使用高度 auto。我怎样才能让这个 Accordion 按照它的构建方式向上和向下滑动？

欢迎提出任何建议。这是 fiddle 的链接:https://jsfiddle.net/jennbrewer/ad42504c/8/

$(function accordion(){
        $(".accordion").click(function() {


             $(this).find(".less").toggleClass("more");

             var height = $('.accordion .less').show().height();
             $('.accordion .less').hide();

             $('.accordion .less').show();

             console.log(height);

            if ( ($(this).find('.less').hasClass('more')) ) {

                    $(this).find('.less').animate({
                        height: height,
                    },400)                       
                } else {

                 $(this).find('.less').animate({
                        height:"20px",
                    },400) 
                }
                return false;

           });
    });

Answer 1

您可以使用属性 scrollHeight，因为当 DOM 首次创建时，每个元素都将其完整高度存储在此属性中，有关更多详细信息，请参见以下内容:

$(function() {
  $(".accordion").click(accordion);
});

function accordion() {
  var text = $(this).find("div");
  var height = text.get(0).scrollHeight;

  if ($(text).hasClass('less')) {
    $(text).animate({
      height: height
    }, 400);
    toggle(text);
  } else {
    $(text).animate({
      height: 20
    }, 400);
    toggle(text);
  }
}

function toggle(text) {
  $(text).toggleClass("less");
  $(text).toggleClass("more");
}

.accordion-wrap {
  margin: auto;
  transition: all 0.5s;
  cursor: pointer;
}
.accordion-wrap .accordion {
  padding: 30px 20px;
  text-align: left;
  border: 1px solid #dbdbdb;
  transition: all 500ms linear;
  margin-bottom: -1px;
}
.accordion-wrap .selected {
  border: 1px solid red;
  margin: -1px 0;
  position: relative;
}
.accordion-wrap button,
.accordion-wrap p {
  display: block;
  margin: auto;
}
.accordion-wrap p {
  color: #0a0a0a;
}
.accordion-wrap .less,
.accordion-wrap .more {
  width: 80%;
  text-align: center;
  margin: 0 auto;
}
.accordion-wrap .less {
  height: 20px;
  overflow: hidden;
}
.accordion-wrap .more {
  height: auto;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="accordion-wrap">

  <div class="accordion">
    <div class="less">
      Ipse eorum Ipse eorum opinionibus accedo, qui Germaniae... Personalmente inclino verso l'opinione di quanti ritengono che i popoli della Germania...
    </div>
  </div>
  <div class="accordion">
    <div class="less">
      Ipse eorum Ipse eorum opinionibus accedo, qui Germaniae... Personalmente inclino verso l'opinione di quanti ritengono che i popoli della Germania... Ipse eorum opinionibus accedo, qui Germaniae..
    </div>
  </div>
  <div class="accordion">
    <div class="less">
      Ipse eorum Ipse eorum opinionibus accedo, qui Germaniae... Personalmente inclino verso l'opinione di quanti ritengono che i popoli della Germania... Ipse eorum opinionibus accedo, qui Germaniae.. Ipse eorum opinionibus accedo, qui Germaniae.. Ipse eorum
      opinionibus accedo, qui Germaniae..
    </div>
  </div>
  <div class="accordion">
    <div class="less">
      Ipse eorum Ipse eorum opinionibus accedo, qui Germaniae... Personalmente inclino verso l'opinione di quanti ritengono che i popoli della Germania...
    </div>
  </div>

</div>