Question

我有一个div，在div内部，我想用从服务器获取的段落填充它，它可能是1或100个段落。

我只想显示第一个，其余的将不显示，单击div向下滑动以显示其余的。

<div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>

var slideStatus = false;

 if (!slideStatus) {
   $(".card-text-paragraph").animate({ height: "100%" }, "slow");
    console.log(slideStatus);
    slideStatus = true;
    console.log(slideStatus);
  } else {
    $(".card-text-paragraph").animate({ height: "90px" }, "slow");
    console.log(slideStatus);
    slideStatus = false;
    console.log(slideStatus);
  }

如果我以px表示，它会向上滑动但不会向下滑动到100％，但是可以，但我想达到100％

有人可以帮助我吗？

Answer 1

对于您而言，要进行过渡，您需要保持高度单位不变。

尝试一下

<div class="content">
<p></p>
<p></p>
....
....
....
<p></p>
</div>

Js代码：

var heightOfContent = $('.content').height(),
    expandContentStatus = false;

    $('.content').height('90px');

    $('.content').on('click', function() {
       if(expandContentStatus) {
           $(this).height(heightOfContent);
       } else {
           $(this).height('90px');
       }
    })

首先，您需要存储 div.content 元素的实际高度。

Answer 2

使用slideUp & slideDown方法

var slideStatus = false;
function clickfunc(){
 if (!slideStatus) {
   $(".card-text-paragraph").slideUp();
    slideStatus = true;
  } else {
    $(".card-text-paragraph").slideDown();
    slideStatus = false;
  }
 
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="clickfunc()">click</button>
<div class="card-text-paragraph" style="">
<p>.</p>
<p>..</p>
<p>...</p>
<p>....</p>
<p>.....</p>
</div>

Answer 3

另一个选项slideToggle

function clickfunc(){
   $(".card-text-paragraph").slideToggle();
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="clickfunc()">click</button>
<div class="card-text-paragraph" style="">
<p>.</p>
<p>..</p>
<p>...</p>
<p>....</p>
<p>.....</p>
</div>

我在jquery上下滑动时遇到问题

3 个答案: