jquery - 是 (':hidden' )在 slipToggle() 之后始终为 false

Question

我无法检测 jQuery 的 slideToggle() 函数的向上/向下滑动。我引用过这篇文章Demo of slideToggle in StackOverflow

$('#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 已成功切换，但 var 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>