Javascript 如何防止动画div在多次单击后多次展开

我有一个列表，每个列表项在被点击时都会扩展，然后在再次点击后会缩小，动画持续200毫秒。这可以正常工作，但如果用户在短时间间隔内多次单击列表项，它会试图以一种方式赶上用户，从而导致它在相当长的时间内多次扩展和收缩，这看起来非常麻烦

这是我的HTML

<ul id="cons">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

---

编辑：很抱歉，我误解了你的问题

不过，这应该可以做到：

原始答案：

$（“#cons”）.children（）。每个（（索引，项）=>{
让itemToggler=new-Toggler（item，400，'100px'，'no-cursor'）；
$（item）.on（'click'，event=>itemToggler.toggle（））
});
功能切换器（项目、持续时间、maxToggleHeight、noCursorClass）{
this.item=项目；
this.toggled=false；
this.noCursorClass=noCursorClass；
this.maxToggleHeight=maxToggleHeight；
这个。持续时间=持续时间；
this.originalHeight=$（item）.height（）；
this.toggle=（）=>{
$（this.item）.addClass（this.noCursorClass）；
$（this.item）。设置动画({
高度：this.toggled？this.originalHeight:this.maxToggleHeight
}, {
持续时间：这个持续时间，
完成：（）=>{
$（this.item）.removeClass（this.noCursorClass）；
this.toggled=！this.toggled；
}
});
}
}

li{
光标：指针；
}
.没有光标{
光标：不允许；
}

点击一个项目


一个
两个
三
四
五

我把它修好了。诀窍是询问该项目是否已设置动画，并且仅在单击时设置动画（如果该项目尚未设置动画中期）。这样一来，动画就不会相互“叠加”，而需要相互追赶。因此，我将代码更改为：

Array.from(document.getElementById('cons').children).forEach((item, index) => {
    function toggleForward(item) {
      return () => {
        if(!($(item).is(':animated'))) {
          $(item).animate({height: '400px'}, 400)
          $(item).off('click').click(toggleBackward(item))
        }
      }
    }
    function toggleBackward(item) {
      return () => {
        if(!($(item).is(':animated'))) {
          $(item).animate({height: '50px'}, 400)
          $(item).off('click').click(toggleForward(item))
        }
      }
    }
    $(item).click(toggleForward(item))
})

---

谢谢，但是在你的代码中，项目在展开后会立即缩回，但是我需要它们只有在被点击后才能缩回again@Tom888对不起，我误解了你的问题。。我还演示了如何在动画中更改光标，使其更明显地显示在动画中不能单击。没关系。是的，这很有帮助，我现在将添加它，并且我还将更改收集子元素的方法以使用jquery。谢谢@Tom888我刚刚更新了我的答案，以显示如何处理此问题，而不必在每次单击后继续删除并重新添加事件。删除和重新添加事件会使用不需要使用的I/O。。可以认为是“浪费”…@Tom888我还提供了一个新的代码片段来展示如何将其转换为自定义jQuery插件，这在我看来是最好的。

Array.from(document.getElementById('cons').children).forEach((item, index) => {
    function toggleForward(item) {
      return () => {
        if(!($(item).is(':animated'))) {
          $(item).animate({height: '400px'}, 400)
          $(item).off('click').click(toggleBackward(item))
        }
      }
    }
    function toggleBackward(item) {
      return () => {
        if(!($(item).is(':animated'))) {
          $(item).animate({height: '50px'}, 400)
          $(item).off('click').click(toggleForward(item))
        }
      }
    }
    $(item).click(toggleForward(item))
})