Question

我的订购清单有问题，我想要动画，但我也希望隐藏订购清单。当列表未打开时，列表之间存在间隙。

所以我的问题是：我如何制作有序列表display: none，并在关闭它时仍然获得动画。如何以标准方式关闭列表？

function loadul(name) {
  var elem = $('#' + name);
  if (elem.hasClass('show-list')) {
    elem.removeClass('show-list');
    elem.addClass('hide-list')
    elem.data('height', elem.outerHeight())
    elem.css('height', '0px')
  } else {
    elem.removeClass('hide-list');
    elem.addClass('show-list')
    elem.css('height', elem.data('height'))
  }
}

.sub-list {
  overflow: hidden;
  transition: all 300ms;
}

.hide-list {
  display: none;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<li id="work" OnClick="loadul('list1')">
  List
</li>
<ol class="sub-list show-list" id="list1">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>

<li id="work" OnClick="loadul('list2')">
  List
</li>
<ol class="sub-list show-list" id="list2">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>

Answer 1

您可以使用默认的引导程序.collapse类来解决这种崩溃。

引导程序折叠带有默认的幻灯片动画

尝试一下

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="lists">
  <span data-toggle="collapse" data-target="#demo">List Number 1</span>
  <ul id="demo" class="collapse">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>
</div>


<div class="lists">
  <span data-toggle="collapse" data-target="#demo1">List Number 2</span>
  <ul id="demo1" class="collapse">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>
</div>

</body>
</html>

Answer 2

@Viira对您的问题进行评论时，您似乎可以为此使用jQuery手风琴（因为您已经包含jQuery）。我在此处用您的数据作为示例：https://jsfiddle.net/kr4qhy9m/。

HTML：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="accordion">
  <h3>List 1</h3>
  <div>
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
  </div>
  <h3>List 2</h3>
  <div>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </div>
</div>

Javascript：

$(function() {
    $("#accordion").accordion();
});

Answer 3

您可以为display:none制作min-height的动画，而不能为ul制作动画，我为动画添加了min-height我更改了您的html，因为它是无效的< / p>

function loadul(name) {
  var elem = $('#' + name);
  if (elem.hasClass('show-list')) {
    elem.removeClass('show-list');
    elem.addClass('hide-list')
    elem.data('height', elem.outerHeight())
    elem.css('height', '0px')
  } else {
    elem.removeClass('hide-list');
    elem.addClass('show-list')
    elem.css('height', elem.data('height'))
  }
}

.sub-list {
  overflow: hidden;
  transition: all 300ms;
  min-height: 100px;
}

.hide-list {
  min-height: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div id="work" OnClick="loadul('list1')">
    List
  </div>
  <ol class="sub-list show-list" id="list1">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ol>
</div>

<div>
  <div id="work" OnClick="loadul('list2')">
    List
  </div>
  <ol class="sub-list show-list" id="list2">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ol>
</div>

如何获得动画但仍然隐藏ol？

3 个答案: