Jquery $ toggle ('' slow '), показывающий поведение мерцания / зависания? - PullRequest
Новая
       7

Jquery $ toggle ('' slow '), показывающий поведение мерцания / зависания?

0 голосов
/ 17 ноября 2018

Задача Переход .toggle («медленный») ведет себя странно, он мерцает перед тем, как скрыться и показать, вероятно, из-за того, как мой код настроен и, возможно, неэффективен.

Полная информация У меня есть базовая настройка, в которой я показываю / скрываю более / менее списки, основываясь на том, сколько списков там будет, потому что в конечном итоге, когда данные поступят из серверной части, мы не узнаем. Так как прыжки в диве не очень удобны для пользователя, я добавил .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 flexible. </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 offers a Long Life Cycle
            </li>
            <li class="pb-2 ml-5">
              FRP offers a Long Life Cycle
            </li>
            <li class="pb-2 ml-5">
              FRP offers a Long Life Cycle
            </li>
            <li class="pb-2 ml-5">
              FRP offers a Long Life Cycle
            </li>
            <li class="pb-2 ml-5">
              FRP offers a Long Life Cycle
            </li>
            <li class="pb-2 ml-5">
              FRP offers 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>

1 Ответ

0 голосов
/ 17 ноября 2018

Это потому, что вы устанавливаете элементы списка для отображения: нет, когда вы отображаете ни один, он скрывает весь элемент, поэтому, когда вы хотите показать его, сначала отображаются все элементы (отступы), а затем начинается переходфактического текста.

Вы должны поиграть с высотой элементов, установить высоту на 0, чтобы скрыть его, и когда вы хотите показать его, установите его на высоту: auto.

...