问题是可见的切换？

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