Question

问题 .toggle（'slow'）转换很奇怪，它在隐藏和显示之前会闪烁，这可能是由于我的代码设置方式可能并不高效。

详细信息 我有一个基本设置，其中我根据要显示的列表数量来显示/隐藏更多/更少的列表，因为最终当数据来自后端时，我们将不知道。由于div跳跃不是一种好的用户体验，因此我添加了一个.toggle（'slow'），以便可以很好地调整高度。但是正如您在演示中所看到的那样，它显示的是类似越野车的行为，而隐藏列表却在闪烁。

.product-promotion-display {
    background: linear-gradient(90deg, #d4272e 50%, #fff 50%);
    overflow: hidden;
    transition: height 1s ease;
  }
  .product-promotion-display ._see-more-li {
    list-style: none;
    cursor: pointer;
    text-decoration: underline;

  }

<html>

<head>
  <title>Products slider</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
	 crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">

  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
	 crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
	 crossorigin="anonymous"></script>


</head>

<body>

  <div class="product-promotion-display border">

    <div class="container">

      <div class="row pt-5">
        <div class="col-sm text-white pb-3">
          <h1 class="pb-4">Cable Tray - FTE FRP</h1>
          <P class="pb-2">Ideal
            Ideal for applications that require high strength in high corrosion resistance. The tray system has 2
            types: 50
            and 80 mm heights that are extremely ﬂexible. </P>
          <h5 class="pb-1">Advantages:</h5>
          <ul class=" pl-0">
            <li class="pb-2 ml-5">
              Easy to cut
            </li>
            <li class="pb-2 ml-5">
              No hot work permit required
            </li>
            <li class="pb-2 ml-5">
              Simple hand tools used for cutting and drilling
            </li>
            <li class="pb-2 ml-5">
              FRP oﬀers a Long Life Cycle
            </li>
            <li class="pb-2 ml-5">
              FRP oﬀers a Long Life Cycle
            </li>
            <li class="pb-2 ml-5">
              FRP oﬀers a Long Life Cycle
            </li>
            <li class="pb-2 ml-5">
              FRP oﬀers a Long Life Cycle
            </li>
            <li class="pb-2 ml-5">
              FRP oﬀers a Long Life Cycle
            </li>
            <li class="pb-2 ml-5">
              FRP oﬀers a Long Life Cycle
            </li>
          </ul>


          <div class="btn-group pt-2 pb-5">
            <button type="button" class="btn btn-outline-light mr-5">Request A Quote</button>
            <button type="button" class="btn btn-outline-light">Shop Online</button>
          </div>
        </div>

        <div class="col-sm ppd-img-div align-self-center">
          <img src="./images/toolbox.png" alt="there was an image" class="img-fluid">
        </div>
      </div>


    </div>

  </div>


  <script type="text/javascript">
    $(document).ready(function () {
      $('ul').each(function () {
        var max = 4
        if ($(this).find('li').length > max) {
          $(this).find('li:gt(' + max + ')').hide().end().append('<li class="_see-more-li pl-0 ml-0 pt-3"><h5 class="_see-more-text">Read More</h5></li>');
          $('._see-more-li').click(function () {
            $(this).siblings(':gt(' + max + ')').toggle('slow');
            if ($('._see-more-text').length) {
              $(this).html('<h5 class="show_less">Read Less</h5>');
            } else {
              $(this).html('<h5 class="_see-more-text">Read More</h5>');
            };
          });
        };
      });


    })
  </script>


</body>

</html>

Answer 1

这是因为您正在设置要显示的列表项：无，当不显示时，它会隐藏整个项目，因此，当您要显示它时，它将首先显示所有项目（填充），然后开始过渡实际的文字。

您应该使用项目的高度，将其高度设置为0以将其隐藏，然后在要显示时将其设置为高度：自动。

jQuery $ toggle（“ slow”）显示闪烁/卡死的行为？

1 个答案: