SlideToggle列表仅在关闭时显示列表的一部分

Question

我有很长的项目清单
我想在默认情况下只显示部分内容 并按下按钮显示所有项目

我有这个jsfiddle，但是如何使用jQuery slideToggle（）为它设置动画：

HTML：

<ul class="faded part">
  <li>List item</li>    
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>
<button class="expand">Open</button>

CSS：

.part li:nth-of-type(-n+3) {
  display: inherit !important;
}    
.part li {
  display: none;
}     

JS：

$(document).ready(function() {
  $(".expand").click(function() {
    if ($(this).text() != "Close") {
      $(this).parent().children("ul").removeClass("part");
      $(this).text("Close");
    } else {
      $(this).parent().children("ul").addClass("part");
      $(this).text("Open");
    }
  });
});

Answer 1

你可以尝试这样的事情。

检查this链接以获取更多信息。

＆＃13;

＆＃13;

$(document).ready(function() {

  $(".expand").click(function() {
    if ($(this).text() != "Close") {
      $(this).parent().children("ul").removeClass("closed");
      $(this).text("Close");
      
    } else {
      $(this).parent().children("ul").addClass("closed");
      $(this).text("Open");
    }
  });
});

＆＃13;

li {
  display: inherit;
}

.slider.closed {
	max-height: 20px;
}

.slider {
	overflow-y: hidden;
	max-height: 500px; /* approximate max height */

	transition-property: all;
	transition-duration: .5s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="slider closed">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>
<button class="expand">Open</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

为li设置动画，请使用SlideUp SlideDown功能。

检查此代码段。

$(document).ready(function() {
  $(".expand").click(function() {
    if ($(this).text() != "Close") {
      $(this).parent().children("ul").find("li:nth-child(3)").nextAll().slideDown(function(){
       });
      $(this).text("Close");
    } else {
      $(this).parent().children("ul").find("li:nth-child(3)").nextAll().slideUp(function(){
    });
      $(this).text("Open");
    }
  });
});

li {
  display: inherit;
}

.part li:nth-of-type(1n+4) {display: none;} {
  display:none;
}


.faded {
  position: relative;
}

.faded:after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 100%);
  width: 100%;
  height: 4em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul class="part">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>
<button class="expand">Open</button>