Javascript 使用if-else功能检查滑动切换状态&；在每次切换后报告滑块切换状态

我试图通过一个小例子来理解slideToggle的状态

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

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

另外，当我检查控制台时，slideToggle状态的值没有改变，为什么？它们是否应该反映元素在第二次单击后的状态，因此处于隐藏状态

我做错了什么？在本例中，我希望在第二个切换上打开菜单红色，因为选项元素不再可见

我不熟悉jQuery和编程，所以请原谅我在逻辑方面的明显错误。也许我必须从另一个角度重新思考这个问题。这就是你进来的地方，请帮我理解。多谢各位

HTML

CSS

---

更详细地查看jQuery:visible和：hidden选择器的文档：

问题在于：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');        
    }    
});

---

slideToggle函数是异步的，因此元素在完成之前不会真正隐藏。为什么不在标题中使用一个简单的标志呢？我对标志一无所知，你能给我指一下jQUery文档或一个例子吗？谢谢，这很有帮助！虽然我不知道如何切换类，但我在哪里可以找到更多关于这方面的信息？你的例子很好。你是否也与另一种逻辑有关联，因为你说有很多种方法，我试图用另一个角度来解释，也许会有帮助？谢谢。toggleClass文档就在这里：本质上，它向selector元素添加了一个类，然后在下一次单击时再次删除它们，提供了一个简单的标志，可以在每次单击时切换开关。因为它添加了一个类，所以您也可以在CSS中将其作为目标，从而使JavaScript更干净（例如，#options.opened{background:#16a085；}邪恶！谢谢！

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

#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;
}

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

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

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

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

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