Question

我试图用一个小例子来理解slideToggle的状态。

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

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

另外，当我检查控制台时，slideToggle状态的值不会改变，为什么？如果点击第二次点击后它们不能反映元素的状态，那么隐藏吗？

我做错了什么？我想为了这个例子，在第二个切换开关上将菜单设置为红色，因为那时选项元素不再可见。

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

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，并且由于宽度不为零，这是真的。

有很多方法可以做你想要的事情。一个很好的方法是切换一个类并使用它来检测项是否被切换：

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

使用if else函数检查slideToggle状态＆amp;报告每次切换后的slideToggle状态

1 个答案: