javascript - 可见切换有问题吗？

Question

  $('.sub-menu').on('click', function(){
    var menu = $(this).parents('.row').next()
    $(menu).slideToggle();
    var text = $(menu).is(':visible') ? 'open' : 'close';
    $('.sub-menu-status').text(text);
  });

由于某种原因，它只输出close，而从不写入open。

检查了代码并尝试了这种变体，但得到与上面相同的结果:

  var text = $(menu).css('display') == 'none' ? 'open' : 'close';

有人可以帮我理解这一点吗？谢谢。

jsFiddle 更新:http://jsfiddle.net/#&togetherjs=LlkSSawSsb

Answer 1

从 this 问题中我得知 is(':visible') 将在 slideToggle 转换开始时进行检查。所以它总是返回true。

试试这个

$('.sub-menu').on('click', function(){
    var menu = $(this).parents('.row').next()
    var text = $(menu).is(':visible') ? 'close' : 'open';
    $(menu).slideToggle();   
    $('.sub-menu-status').text(text);
  });

DEMO

或者在 slideToggle 的回调中执行此操作

 $('.sub-menu').on('click', function(){
    var menu = $(this).parents('.row').next()
    $(menu).slideToggle(function() {
        var text = $(menu).is(':visible') ? 'open' : 'close';
        $('.sub-menu-status').text(text);
    })
  });

DEMO