Question

如你所知，操纵高度从0到自动使用过渡并没有给出我们想要的效果，并且使用max-height也没有做到这一点，所以我用jquery尝试了它，我从高处过渡点击0到自动，当我再次点击时，你能帮我把高度设为0。

HTML
<ul>
 <li>Misión
    <p>Superar las necesidades más sofisticadas 
    apasionándonos la gestión de la complejidad.
    Ser especialistas en combinar en una misma</p>
 </li>   
 <li>Tecnologia
   <p>Superar las necesidades más sofisticadas 
   apasionándonos la gestión de la complejidad.
   Ser especialistas en combinar en una misma
   Ser especialistas en combinar en una misma</p>
 </li>   
</ul>

CSS
ul li {
   padding: 10px;
   font-weight: 700;
   cursor: pointer;
   border-bottom: 1px solid grey;
   height: 40px;
   overflow: hidden;
   transition: 0.7s;
}

ul li p {
   padding-top: 10px;
   line-height: 1.8;
   color: grey;
   font-weight: 100;
}

jQUERY
$("ul li").click(function() {
        var pHeight = $(this).find("p").height();
        $(this).height(pHeight);    
});

Answer 1

$("ul li").click(function() {
  if ($(this).get(0).style.height) {
    $(this).height('');
  } else {
    var pHeight = $(this).find("p").height();
    $(this).height(pHeight);
  }

});

ul li {
  padding: 10px;
  font-weight: 700;
  cursor: pointer;
  border-bottom: 1px solid grey;
  height: 40px;
  overflow: hidden;
  transition: 0.7s;
}

ul li p {
  padding-top: 10px;
  line-height: 1.8;
  color: grey;
  font-weight: 100;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Misión
    <p>Superar las necesidades más sofisticadas apasionándonos la gestión de la complejidad. Ser especialistas en combinar en una misma</p>
  </li>
  <li>Tecnologia
    <p>Superar las necesidades más sofisticadas apasionándonos la gestión de la complejidad. Ser especialistas en combinar en una misma Ser especialistas en combinar en una misma</p>
  </li>
</ul>

Answer 2

首先，您需要使li略高于p的高度，否则内容将不会完全可见。 E. g。加上两个高度：

$(this).height($(this).height() + pHeight)

然后，要重置高度，您可以使用

$(this).css('height', '')

这也可用于删除您通过javascript或内联样式动态设置的任何其他CSS规则。外部CSS规则将保持活动状态。

接下来，你隐藏p的方式看起来有点笨拙。我会将其隐藏display: none或height: 0。如果您执行此操作，则会遇到$(this).find("p").height()将返回0的问题。所以你可以做的是将高度设置为auto一纳秒，测量高度并立即再次将其设置为0。根据我的经验，你永远不会真正看到这种变化。因此，在height: 0上设置p之后：

$("ul li").click(function() {
    var $p = $(this).find("p");
    $p.css('height', 'auto');
    var pHeight = $p.height();
    $p.css('height', '');
    $p.height(pHeight); 
});

最后，对于这个任务，使用jquerys slideToggle函数可能更容易，尽管它可能不如CSS过渡平滑。在display: none上设置p后：

$("ul li").click(function() {
    $(this).find("p").slideToggle();
}

元素的高度操纵

2 个答案: