<body>
<span id="lock">lock</span>
<div id="one">test test</div>
<div id="three" style="display: none">hide</div>
<span id="two">test</span>
<div id="div_lock">
Enter password: <input type="password"> <input type="button" value="unlock" id="unlock">
</div>
</body>
$('#lock').click(function(){
$('#div_lock').show();
//????
})
$('#unlock').click(function(){
$('#div_lock').hide();
//????
})
如果我单击“锁定”，那么我想打开 div_lock 并隐藏页面中的所有其他元素。如果我单击解锁，则隐藏 div_lock 并显示以前的元素。
我可以使用 .hide 之外的其他功能吗？如果我使用 hide 则可以检查源代码。也许有任何带有简单哈希等的变量？ 如果不是，我怎样才能用 .hide() 和 show() 做到这一点？我还可以使用 PHP 和 Ajax
查看jsfiddle here .
最佳答案
最简单的解决方案是:
$('#lock').click(function() {
$(this).siblings().andSelf().fadeOut();
$('#div_lock').fadeIn();
})
$('#unlock').click(function() {
$('#div_lock').fadeOut();
$(this).closest('div').siblings().fadeIn();
})
(但请注意，我使用的是 fadeIn() 和 fadeOut() 而不是“更突然”的 show() 和 hide() )
还值得记住的是，如果任何人可以访问您的浏览器(假设这是某种安全功能)，他们仍然可以通过 JavaScript 控制台或通过简单地刷新页面(假设没有登录)来覆盖它。
<小时/>更新以回应OP留下的评论(如下):
this is ok, but if i click unlock then this show me also
<div id="three" style="display: none">hide</div>- this should me stilldisplay:none
您遇到的问题是所有受影响的元素都是 style="display: none;"一旦 jQuery 隐藏了它们(毕竟这就是它的工作原理)；因此我建议采用一种更简洁的方法，并将内容和控件划分为类似于以下内容的内容:
<div id="controls">
<button id="lock">Lock screen</button>
<input type="password" />
<button id="unlock">Unlock screen</button>
</div>
<div id="content">
<!-- all content goes in here -->
</div>
这适用于以下 jQuery(它存储要隐藏/显示的节点，然后根据需要恢复它们):
var content = $('#content'),
contents;
$('#controls').children().slice(1).hide();
$('#lock').click(function() {
contents = content.html();
content.empty();
$(this).hide().siblings().show();
});
$('#unlock').click(function() {
content.html(contents);
$(this).closest('div').children().hide().first().show();
});
关于javascript - 使用 jQuery 锁定和解锁页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11603296/