Question

我从互联网上获取此代码并且我喜欢它反转，因此隐藏了元素并按下了一个按钮来显示它。

jQuery的：

jQuery(document).ready(function(){
    jQuery('#hideshow').live('click', function(event) {        
         jQuery('#hide').toggle('show');
    });
});

HTML：

<input onclick="change()" id='hideshow' type="button" value="Hide">
<div id='hide>
*content here*

所以基本上我希望它可以逆转。因此隐藏了Element（div），并单击按钮（输入）以显示它。

Answer 1

您可以使用jQuery执行此操作：

 jQuery(document).ready(function(){
    var $divHide = jQuery('#hide');    
    $divHide.hide();
    jQuery('#hideshow').live('click', function(event) {        
         $divHide.toggle();
    });
});

但我建议您使用CSS（现在使用jQuery）：

#hide
{
   display: none;
}

我推荐这种方法，因为在DOM上执行的Javascript有时对用户可见。这意味着您的#hide div最初会可见（如果只是一瞬间）。

另外（作为旁白），我重新考虑一下命名约定。我不会把div称为“隐藏”，特别是当你有时希望它显示时。

Answer 2

.live()已被弃用，您应该使用.on()，并使用.toggle()：

jQuery(document).ready(function(){
    jQuery('body').on('click','#hideshow', function(event) {        
         jQuery('#hide').toggle();
    });
});

Answer 3

HTML：

<input onclick="change()" id='hideshow' type="button" value="Hide">
<div id='hide' style="display:none;">
             ^ check for this apostrophy

JS：

jQuery(document).ready(function(){
    jQuery('#hideshow').on('click', function(event) {        
         jQuery('#hide').show();
    });
});

.live不再被使用，并从版本1.9的jquery api中删除。因此，为了确保与较新版本的兼容性，您应该使用on方法（http://api.jquery.com/on/）如果要切换元素，请继续使用

jQuery('#hide').toggle("show");

.show（）;只显示而不是隐藏

Answer 4

试

 jQuery(document).ready(function(){
    jQuery('#hide').hide();
    jQuery('#hideshow').live('click', function(event) {        
         jQuery('#hide').toggle('show');
    });
});

DEMO

Answer 5

Jquery （将live替换为on）：

jQuery(document).ready(function(){
    jQuery('#hideshow').on('click', function(event) {        
         jQuery('#hide').toggle();
    });
});

HTML （在id='hide'末尾添加单引号和结束标记</div>）：

<input onclick="change()" id='hideshow' type="button" value="Hide">
<div id='hide'>
  *content here*
</div>

CSS （添加此css规则）：

#hide {
   display: none;
}

Answer 6

点击按钮元素时需要触发$("#hide").show();。

HTML代码

<input id='hideshow' type="button" value="Hide">
<div id='hide' style="display: none;">
    LoremIpsum
</div>

jQuery代码

$("#hideshow").click(function(){
    $("#hide").show();
});

jQuery - 隐藏＆amp;显示元素REVERSE

6 个答案:

DEMO