is(':hidden') 在 slideToggle() 之后始终为 false

Question

我无法检测到 jQuery 的 slideToggle() 函数的幻灯片 up/down。这篇文章我参考了Demo of slideToggle in Whosebug

$('#ToogleMe').click(function(e) {
  e.preventDefault();
  $('#toogleResult').slideToggle();
  var check = $('#toogleResult').is(':hidden');
  if (check == true) {
    console.log('up');
  } else {
    console.log('down');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="button" id="ToogleMe" value="Toogle" />
<div id="toogleResult">Random Message</div>

#toogleResult 已成功切换，但变量 check 始终为 false。这是为什么？

我的输出图像

Answer 1

要解决此问题，您需要在 slideToggle() 方法的 callback 参数中执行您的代码。这确保它在动画完成并且元素处于最终状态后运行。试试这个：

$('#ToogleMe').click(function(e) {
  e.preventDefault();

  $('#toogleResult').slideToggle(function() {
    var check = $('#toogleResult').is(':hidden');
    if (check) {
      console.log('up');
    } else {
      console.log('down');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" id="ToogleMe" value="Toogle" />
<div id="toogleResult">Random Message</div>

is(':hidden') 在 slideToggle() 之后始终为 false

is(':hidden') always false after slideToggle()

jquery

slidetoggle