Показать частичное содержимое UL, а затем свернуть с переходом - PullRequest
Новая
       8

Показать частичное содержимое UL, а затем свернуть с переходом

0 голосов
/ 25 января 2020

Я создал список, который показывает частичное содержимое и сворачивается с помощью триггера. Все работает нормально, за исключением того, что я не могу заставить это работать с переходом CSS, когда он падает. По сути, я переключаюсь между 2 классами и применяю высоту: 100%

HTML

<div class="list">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
    <li>Item 13</li>
    <li>Item 14</li>
  </ul>
  <span class="more-less"></span>
</div>

CSS

.list.expand {
  height: 180px;
  overflow: hidden;
}
.list.expand.open {
    height: 100%;
  padding-bottom: 20px;
}

JS

var list = $(".list");
$(".more-less").click(function() {
    list.toggleClass("open closed"); 
});

Я сделал CODEPEN , чтобы провести несколько тестов. Я думаю, что это специфическая c ситуация, которая требует определенного c решения. Я часами пробовал фрагменты, найденные здесь в Stackoverflow (CSS и JS), но безуспешно.

нет CSS переход: высота .5s easy; или .animate (высота ...), кажется, работает для меня: / Итак, любая помощь или подсказка будет высоко ценится :) Спасибо

РЕДАКТИРОВАТЬ: я забыл важную информацию: содержимое списка загружается динамически ( WP), поэтому мне нужно установить высоту "auto".

Ответы [ 3 ]

0 голосов
/ 26 января 2020

Благодаря этому посту я наконец нашел обходной путь с jQuery. Возможно, это не лучший способ добиться этого, но он работает: p 

var list = $(".list");

// Apply only if list height is taller than 100px
if (list.height() > 100) {
    list.addClass("expand closed");
}   

// First, set height to auto then memorize the height value in a variable,
// then set the height to 100px
list.css("height", "auto");
var listheight = list.css("height");
list.css("height", "100px");

// When click to the "more-less" trigger, toggle between "open" and "closed" class,
// then apply the correct height for each class
$(".more-less").on("click", function() {
  list.toggleClass("open closed");
  if (list.hasClass("open")) {
    list.height(listheight);
  }
  if (list.hasClass("closed")) {
    list.height(100);
  }
});

CSS

.list.expand {
  height: 180px;
  overflow: hidden;
  -webkit-transition: height .3s ease-in-out;
  -moz-transition: height .3s ease-in-out;
  transition: height .3s ease-in-out;
}

DEMO HERE на CodePen

0 голосов
/ 28 января 2020

Я нашел лучший способ добиться этого, с .scrollHeight

JS

var list = $(".list");

// variable storing an integer corresponding to the scrollHeight pixel value of the element.
var fullHeight = list[0].scrollHeight+'px';

if (list.height() > 100) {
  list.addClass("expand closed");
  list.height(100);
}

$(".more-less").on("click", function() {  
  if(list.hasClass("closed")) {
    list.animate({
      height: fullHeight
    }, 200);
  } else if (list.hasClass("open")) {
    list.animate({
      height: "100px"
    }, 200);
  }
  list.toggleClass("open closed");
});

CSS

.list.expand {
  overflow: hidden;
}

ДЕМО ЗДЕСЬ на CodePen

0 голосов
/ 25 января 2020

Вы пытались добавить переход к .list.expand? 

.list.expand {
  height: 180px;
  overflow: hidden;
  -webkit-transition: height 2s; /* For Safari 3.1 to 6.0 */
  -moz-transition: height 2s; 
  transition: height 2s;
}
...