javascript - 使用 if else 函数检查 slideToggle 状态并在每次切换后报告 slideToggle 状态

Question

http://jsfiddle.net/vmKVS/

我想通过一个小例子来理解 slideToggle 的状态。

当我第一次切换时，选项元素变为绿色。

我希望当我再次单击切换时菜单元素变成红色，现在是第二次，因为现在选项元素进入不可见状态，因此函数的其他部分应该运行，不是吗？

另外，当我检查控制台时，slideToggle 状态的值没有改变，为什么？它们不应该在点击第二次点击后反射(reflect)元素的状态，所以隐藏吗？

我做错了什么？为了这个例子，我想在第二次切换时将菜单变成红色，从那时起选项元素就不再可见了。

我是 jQuery 和编程的新手，所以请原谅我在逻辑上的明显错误。也许我必须从不同的 Angular 重新考虑这一点。这就是你进来的地方，请帮助我理解这一点。谢谢。

HTML

<div id="menu">MENU</div>
<div id="options">OPTIONS</div>

jQuery

$('#menu').click(function(){

    $('#options').slideToggle();

    var isVisible = $( '#options' ).is( ":visible" );
    var isHidden = $( '#options' ).is( ":hidden" );
    console.log (isVisible);
    console.log (isHidden);

    if ($('#options').is(':visible') === true ){
        $('#options').css('background', '#16a085');
        console.log (isVisible);
    }

    else {
        console.log (isHidden);
        $('#menu').css('background', '#8e44ad');        
    }    
});

CSS

#menu {
    width: 100%;
    height: 100px;
    line-height: 100px;
    font-size: 200%;
    background: #000000;
    color: #fff;
    text-align: center;
}

#options {
    width: 100%;
    height: 100px;
    line-height: 100px;
    font-size: 200%;
    background: #ccc;
    color: #fff;
    text-align: center;
    display: none;
}

Answer 1

更彻底地查看 jQuery :visible 和 :hidden 选择器的文档:

http://api.jquery.com/visible-selector/

http://api.jquery.com/hidden-selector/

问题在于，如果选中的元素占用了布局中的空间，那么 :visible 选择器将返回 true，并且由于宽度不为零，所以这是 true。

有很多方法可以满足您的需求。一个很好的方法是切换一个类并使用它来检测元素是否被切换:

$('#menu').click(function(){

    $('#options').slideToggle().toggleClass('opened');

    var isVisible = $( '#options' ).is( ".opened" );

    if (isVisible === true ){
        $('#options').css('background', '#16a085');
    }

    else {
        $('#menu').css('background', '#8e44ad');        
    }    
});

http://jsfiddle.net/vmKVS/1/