Question

如何在此有序列表上制作动画？

我希望使用“ .hide”和“ .show”从顶部到底部打开有序列表，但我无法使其正常工作。有人知道如何使用CSS或Javascript吗？

寻求帮助

<!DOCTYPE html>
<html>
<head>
<script>

function loadul (name)
{
  var elem = document.getElementById(name);
  if(elem.style.display == "block")
  { 
      elem.style.display = "none";
      $("#work").click(function(){
        $(".test").hide(1000);
        });
  }
  else
  { 
      elem.style.display = "block";
      $("#work").click(function(){
        $(".test").show(1000);
        });
  }
}
</script>
</head>
<body>

<li id="work" OnClick="loadul('CTR')">List</li>
<ol class="test" id="CTR">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>

</body>
</html>

Answer 1

希望这可以为您提供帮助，您可以在子列表类中更改过渡动画。我要添加一个删除“ show-list”和“ hide-list”类的按钮，以便进行切换。

<!DOCTYPE html>
<html>
<head>
<style>
.sub-list {
    overflow: hidden;
    transition: all 300ms;
}
</style>
<script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
<script>

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'))
  }
}
</script>
</head>
<body>

<li id="work" OnClick="loadul('CTR')">
    List
</li>
<ol class="sub-list show-list" id="CTR">
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
 </ol>

</body>
</html>

Answer 2

下面是我将如何构造您的html和javascript的示例。我已将您的外部用户更改为可能更有意义的内容。并且由于您已经显示了使用的是jQuery，所以我使用.each（）来一次遍历li元素，并根据它们的索引乘以一个延迟。这也是一个Pen示例。

HTML：

<button id="work" OnClick="loadul('CTR')">List</button>
<ol class="test no-margin" id="CTR">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>

Javascript：

function loadul(name) {
  $("#" + name + " li").each(function(index) {
    if ($(this).is(":visible")) {
      $(this)
        .delay(1000 * index)
        .hide(0);
    } else {
      $(this)
        .delay(1000 * index)
        .show(0);
    }
  });
}

CSS：

ol.no-margin {
  margin-top: 0px;
  margin-bottom: 0px;
}

动画在有序列表上

2 个答案: