Использование jQuery .slideToggle () с display: grid; - PullRequest
Новая
       1

Использование jQuery .slideToggle () с display: grid;

2 голосов
/ 07 марта 2020

У меня есть набор складных / расширяемых элементов, и я хотел бы, чтобы внутреннее содержимое было размечено в формате display:grid.

В моей текущей настройке я использую хук в $().slideToggle() метод для вызова анонимной функции, которая проверяет, является ли элемент видимым и заставляет ли отображение отображаться в сетке.

Это не очень хорошее решение в его нынешнем виде, потому что содержимое не в формате сетки во время анимации расширения в первый раз контент показывается. Правильный формат применяется только после завершения анимации. См. Jsfiddle здесь .

Как правильно настроить это в css / jquery, чтобы внутренний расширяемый контент отображался в виде сетки даже во время первой анимации?

HTML

<div class="user-products main">
        <div class="user-product">
            <div class ="collapsible-header">
                <span class="user-product-expand-toggle"><h4>&#9654; Product 1 - 2020-02-03 1:58pm</h4></span>
            </div>
            <div class="user-product-details hide">
                <div class="user-product-left">
                <p>Download All Files as Zip</p>
                <p>View Preview</p>
                <p>Details</p>
                <p>Details</p>
                <p>Details</p>
                </div>
                <div class="user-product-mid">
                <p>Details</p>
                <p>Details</p>
                <p>Details</p>
                <p>Details</p>
                <p>Details</p>
                </div>
                <div class="user-product-right">
                <div class="unpurchased-product"><button class="purchase-product">Purchase</button></div>
                </div>
            </div>
        </div>
        <div class="user-product">
            <div class ="collapsible-header">
                <span class="user-product-expand-toggle"><h4>&#9654; Product 2 - 2020-02-07 5:01pm</h4></span>
            </div>
            <div class="user-product-details hide">
                <div class="user-product-left">
                <p>Download All Files as Zip</p>
                <p>View Preview</p>
                <p>Details</p>
                <p>Details</p>
                <p>Details</p>
                </div>
                <div class="user-product-mid">
                <p>Details</p>
                <p>Details</p>
                <p>Details</p>
                <p>Details</p>
                <p>Details</p>
                </div>
                <div class="user-product-right">
                <div class="unpurchased-product"><button class="purchase-product">Purchase</button></div>
                </div>
            </div>
        </div>
    </div>

jQuery

$(".user-product-expand-toggle").click(function(){
    parentDiv = $(this).closest(".collapsible-header");
    $(parentDiv.siblings(".user-product-details")[0]).slideToggle('slow', function() {
        if ($(this).is(':visible'))
            $(this).css('display','grid');
    });

});

CSS

.hide.hide {
  display: none;
}

.user-products.main {
    overflow-y:auto;
}
.user-product-details {
    margin-left:50px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.collapsible-header{
    margin-left:50px;
    text-align: left;
    cursor: pointer;

}

Ответы [ 2 ]

2 голосов
/ 07 марта 2020

Вместо использования slideToggle используйте slideUp и slideDown.

Пример: 

$(".user-product-expand-toggle").click(function(){

    parentDiv = $(this).closest(".collapsible-header");

    let $element = $(parentDiv.siblings(".user-product-details")[0]);

    if ($element.is(':visible')) {
        $element.slideUp();
    }
    else {
        $element.slideDown({
            start: function() {
              $(this).css('display','grid');
            }
        });
    }

});

Демонстрационная скрипка

1 голос
/ 07 марта 2020

jQuery использовать display свойство с методом slideToggle. Этот jQuery дизайн несовместим с выравниванием свойства display.

Таким образом, эти проблемы легко обойти:

  1. Использовать height анимацию слайда свойства и переключить display свойство, когда анимация начинается и заканчивается.
  2. Разделите на две части, одну, чтобы скрыть элементы, и одну, чтобы выровнять элементы. контейнер (2. раствор): 

    $(".user-product-expand-toggle").click(function() {
  parentDiv = $(this).closest(".collapsible-header");
  $(parentDiv.siblings(".hide")[0]).slideToggle('slow');
});
    .hide.hide {
  display: none;
}

.user-products.main {
  overflow-y: auto;
}

.user-product-details {
  margin-left: 50px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.collapsible-header {
  margin-left: 50px;
  text-align: left;
  cursor: pointer;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="user-products main">
  <div class="user-product">
    <div class="collapsible-header">
      <span class="user-product-expand-toggle">
        <h4>&#9654; Product 1 - 2020-02-03 1:58pm</h4>
      </span>
    </div>
    <div class="hide">
      <div class="user-product-details">
        <div class="user-product-left">
          <p>Download All Files as Zip</p>
          <p>View Preview</p>
          <p>Details</p>
          <p>Details</p>
          <p>Details</p>
        </div>
        <div class="user-product-mid">
          <p>Details</p>
          <p>Details</p>
          <p>Details</p>
          <p>Details</p>
          <p>Details</p>
        </div>
        <div class="user-product-right">
          <div class="unpurchased-product"><button class="purchase-product">Purchase</button></div>
        </div>
      </div>
    </div>
  </div>
  <div class="user-product">
    <div class="collapsible-header">
      <span class="user-product-expand-toggle">
        <h4>&#9654; Product 2 - 2020-02-07 5:01pm</h4>
      </span>
    </div>
    <div class="hide">
      <div class="user-product-details ">
        <div class="user-product-left">
          <p>Download All Files as Zip</p>
          <p>View Preview</p>
          <p>Details</p>
          <p>Details</p>
          <p>Details</p>
        </div>
        <div class="user-product-mid">
          <p>Details</p>
          <p>Details</p>
          <p>Details</p>
          <p>Details</p>
          <p>Details</p>
        </div>
        <div class="user-product-right">
          <div class="unpurchased-product"><button class="purchase-product">Purchase</button></div>
        </div>
      </div>
    </div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...