当 slideDown 或 slideUp 效果完成时调用一个函数

Question

我有一个简单的下拉列表，我希望当用户使用 jquery 方法 slideToggle 切换下拉列表以显示或隐藏另一个 div 时，不幸的是，我正在努力解决这个问题。

预期：当用户单击一个图标时，它应该显示列表并隐藏另一个 div（slideDown 效果），当用户再次单击以关闭下拉列表（slideUp 效果）时，我想显示隐藏的div。

 var link = $('.sprzatanie-link');

  link.click(function(e) {
    e.preventDefault();
    list.slideToggle("fast", function(){
      console.log('do something')
      if("slideDown"){
        $('.dezynfekcja-dropdown').hide();
      }else if("slideUP"){
        $('.dezynfekcja-dropdown').show();
      }
    });
  });

我尝试添加一个回调函数，但我不知道如何检查幻灯片效果是slideDown还是slideUp。

任何想法将不胜感激。

Answer 1

一旦切换完成，它基本上会隐藏或显示正在切换的元素。 因此，在complete的回调中，您可以简单地检查您的元素是显示还是隐藏。

 var link = $('.sprzatanie-link');

  link.click(function(e) {
    e.preventDefault();
    list.slideToggle("fast", function(){
      // `this` refers to the DOM element being toggled.
      // We can use `is(":visible")` to check if it visible or not
      let isVisible = $(this).is(":visible");

      // show console message that tells us if element is hidden or visible
      console.log(this.innerText, ' is now ', isVisible);

      // use isVisible to do whatever you want show/hide etc
      if(isVisible) {
        $('.dezynfekcja-dropdown').hide();
      } else {
        $('.dezynfekcja-dropdown').show();
      }
    });
  });