slideToggle（）

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

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

$('#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>