Question

我有这段代码：

$(document).on('click', function(e) {
    var elem = $(e.target).closest('#click'),
        box  = $(e.target).closest('#box');

    if ( elem.length ) {
        e.preventDefault();
         showbox();
    }else if (!box.length){
         hidebox();
    }
});

因此，如果showbox();行是：$('#box').toggle();，那么它的效果非常好。但如果我在没有切换的情况下使用脚本，那么按钮的隐藏就会停止工作。

以下是包含所有详细信息的完整示例：http://jsfiddle.net/8SFMw/

Answer 1

它与showbox()函数无关，elem.length将始终返回1，因此始终为真。

尝试使用.is(":visible")，类似于......

$(document).ready(function(){
    $('#click').click(function(){
        if ($('#box').is(":visible")){
            hidebox();
        }else{
            showbox();
        }
    });
 });

Answer 2

它并没有停止工作。你的if语句每次都变为true，而你的else语句从未执行过。所以你应该改变你的逻辑。如果.toggle（）甚至你的逻辑执行if语句它将切换显示和隐藏。有关最佳做法，请参阅此DEMO。

在CSS中：

#box
{
    padding:10px;
    border:solid;
    display:none;
    margin-top:0px;
}

#box.show
{
    margin-top:0px;
    display:block;
}

#box.hide
{
    margin-top:1px;
    display:none;
}

在JS中：

var $box = $('#box');
$(document).on('click', function(e) {    
    if ( $box.hasClass('show') ) 
    {
        $box.removeClass('show').addClass('hide');
        //Some code here
    }
    else
    {
        $box.removeClass('hide').addClass('show');
        //Some code here
    }
});

所以，当然我假设您希望将来使用其他逻辑，所以这是您的解决方案。如果你想在这种情况下只显示和隐藏，只需使用切换而不用其他逻辑。

Answer 3

如果我理解正确，当您使用button#click代替showbox()时点击.toggle()时，框不会消失。

这是因为当您点击按钮本身时，您的elem.length != 0。换句话说，它永远不会在else if语句中运行代码。

Answer 4

你的if条件不起作用你可以用

来做

if ( $('#box').is(":hidden") ) { ...}else{...}

像这样：jsfiddle

单击以显示或单击外部或相同的按钮以隐藏

4 个答案: