Question

我隐藏了我的div =＆＃34; true＆＃34;哪个有效但是我想在点击一下按钮后显示它。

我使用Node.js，这部分必须用Javascript编码。

HTML：

div class="sideDiv" hidden="true">

的javascript：

我用show（）尝试了它，但它没有用。

socket.on('loginInServer',function(data){
        $('.sideDiv').show();
    });

Answer 1

$('.sideDiv').attr('hidden', false);

但是你可能想要首先隐藏它而不使用隐藏属性，老实说我没见过任何人使用隐藏属性（除了隐藏的表单字段）。

最简单的方法是在你的css中使用它：

.sideDiv{display: none;}

或者如果你很懒，你可以在html中将它嵌入元素本身：

<div class="sideDiv" style="display: none"></div>

然后当你的页面加载时，它将被隐藏，你正在做什么.show（）将起作用，因为jQuery函数在dom元素的“display”样式上运行。

Answer 2

使用removeAttr()方法删除属性。

ocket.on('loginInServer',function(data){
    $('.sideDiv').removeAttr('hidden');
});

<小时/> 或者使用attr()方法将属性更新为false。

ocket.on('loginInServer',function(data){
    $('.sideDiv').attr('hidden', false);
});

<小时/> 或者使用prop()方法将属性设置为false。

ocket.on('loginInServer',function(data){
    $('.sideDiv').prop('hidden', false);
});

仅供参考：用于隐藏元素集CSS display:none;，这将是更好的方式，稍后您可以使用show()方法显示。

Answer 3

样式"display:none"和属性hidden="true"的呈现方式不同。

隐藏的全局属性是一个布尔属性，表示该元素尚未或不再相关。例如，它可用于隐藏在登录过程完成之前无法使用的页面元素。浏览器不会使用隐藏属性集渲染元素。

jQuery＆＃39; show更改了元素的style，但未修改属性hidden

...这大致等同于调用.css（＆＃34;显示＆＃34;，＆＃34;阻止＆＃34;）......

您需要使用jQuery＆＃39; attr或prop来修改属性hidden

$('.sideDiv').attr('hidden', false);

$('.sideDiv').prop('hidden', false);

Answer 4

如上所述，您应该删除隐藏属性并使用css隐藏元素。

.sideDiv {
  display: none;
}

然后jquery的show（）方法将起作用。

Answer 5

除了之前的答案，您还可以在简单的JS中执行此操作：

document.querySelector(".sideDiv").setAttribute("hidden", "false");