Question

我正在尝试让这个节目隐藏得很顺利。当我使用简单

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

它运行良好，但它很跳跃所以我试图为高度添加.animate但是在jQuery中不可能使用高度auto。如何让这个手风琴向上滑动并向下滑动？

欢迎任何建议。这是一个小提琴的链接：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时，每个元素都会在此属性中存储其完整高度，有关详细信息，请参阅以下内容：

＆＃13;

$(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");
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

显示无从页面中删除布局，因此高度始终为0.我会将这些元素的opacity设置为0，因为不透明度（或visibility: hidden;）将隐藏页面上的元素，但保持它的布局/高度，然后当插件触发时，抓住每个的高度，分配一个数据属性，然后设置固定高度并将不透明度淡化为1.然后打开单击，根据手风琴是否打开的类别设置固定高度或数据属性高度的动画。

＆＃13;

$(function accordion() {
  $('.accordion > div').each(function() {
    var height = $(this).outerHeight();
    $(this).attr('data-height', height);
    $(this).addClass('less');
  });
  $(".accordion").click(function() {
    var $less = $(this).find('.less'),
      height = $less.attr('data-height') + 'px';

    $less.toggleClass('open');

    if (($less.hasClass('open'))) {

      $less.animate({
        height: height,
      }, 400)
    } else {

      $less.animate({
        height: "20px",
      }, 400)
    }
    return false;

  });
});

＆＃13;

.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 {
  opacity: 1;
  height: 20px;
  overflow: hidden;
}

.accordion > div {
  opacity: 0;
  transition: opacity .5s;
}

＆＃13;

<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="">
      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="">
      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="">
      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="">
      Ipse eorum Ipse eorum opinionibus accedo, qui Germaniae... Personalmente inclino verso l'opinione di quanti ritengono che i popoli della Germania...
    </div>
  </div>

</div>

＆＃13;

如何获得此手风琴风格显示/隐藏功能的隐藏div高度？

2 个答案: