点击显示或外单击或同一按钮隐藏

我有这样的代码：点击显示或外单击或同一按钮隐藏

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

来源

2014-01-07 Simon

我忘了提，当我点击盒子它不应该消失，但我认为你已经注意到了脚本。 – Simon

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

尝试使用.is(":visible")，像...

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

来源

2014-01-07 00:53:23 Schmalzy

它会很好，如果外框点击也可以。谢谢 – Simon

我刚刚尝试添加'$（'＃box'）。click（function（）{event.stopPropagation（）;}）;'用你的建议，它有帮助。它的工作原理就是我需要它的工作。感谢你和其他建议类似解决方案的人！这里的工作示例：http://jsfiddle.net/8SFMw/10/ – Simon

@Simon没问题，我没有意识到你想隐藏\当屏幕上的任何地方点击时显示框，我假定你只是想它当按钮发生点击时发生。但很高兴你能将它运用起来。 – Schmalzy

它不停止工作。您的if语句每次都变为true，而您的else语句从未执行。所以你应该改变你的逻辑。如果.toggle（），即使你的逻辑执行语句，它也会切换显示和隐藏。最佳做法见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 
    } 
});

所以，当然我假设你想使用一些其他的逻辑在未来，所以这是为你解决。如果你想在这种情况下只显示和隐藏，只需使用其他逻辑切换。

来源

2014-01-07 00:46:08 Khamidulla

我忘了提及，当我点击盒子时，它不应该消失，但我认为你已经注意到了脚本。但是，您的脚本并不完全符合我的需要，它会在单击框中消失，并且在加载页面时首先单击按钮不起作用。无论如何，谢谢你的帮助！ – Simon

如果我理解正确的话，箱子不会消失。当你点击button#click当您使用showbox()而不是.toggle()。

这是因为，当你点击按钮本身，你elem.length != 0。换句话说，它从不运行else if声明中的代码。

来源

2014-01-07 00:53:32 mikeba

你如果条件不工作，你可以用

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

这样做：jsfiddle

来源

2014-01-07 01:02:49 ilias

抱歉，但它没有帮助。我只需要使用函数而不是切换就可以像使用示例一样工作 – Simon

点击显示或外单击或同一按钮隐藏

回答

相关问题