0 
<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を使うなら、ソースコードをチェックすることが可能です。たぶん、SIMPLEハッシュなどの変数はありますか？そうでない場合は、.hide（）とshow（）を使用してこれを作成するにはどうすればよいですか？PHPとAjaxも使用できます

ここでjsfiddleを表示します。

4

3 に答える 3

2

最も簡単な解決策は次のとおりです。

$('#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()

JSフィドルデモ。

また、誰かがブラウザにアクセスできる場合（これが何らかのセキュリティ機能であると想定）、JavaScriptコンソールを介して、または単にページを更新する（ログインがないと想定）ことで、これを上書きできることも覚えておく価値があります。

OP（下記）が残したコメントに応じて更新：

これは大丈夫ですが、ロック解除をクリックすると、これも表示されます<div id="three" style="display: none">hide</div>-これはまだ私に必要ですdisplay: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();
});​

JSフィドルデモ。

于 2012-07-22T20:15:53.907 に答える
1

このような？

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<style type="text/css">

    .lock_page_div {
        position: absolute;
        top:0;
        left: 0;
        z-index: 9999;
        width: 100%;
        height: 100%;
        display: none;
        background: #ffebcd;
    }
</style>

<a href="javascript:" class="lock_page_a">block page</a>

<div class="lock_page_div">
    <a class="unlock_page_a" href="javascript:">unlock_page_a</a>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.lock_page_a').click(function(){
            $('.lock_page_div').show();
            console.log('lock');
        })

        $('.unlock_page_a').click(function(){
            $('.lock_page_div').hide();
            console.log('unlock');
        })
    })
</script>
</body>
</html>

申し訳ありませんが、jsfiddleは私にとってとても遅いです> __ <

于 2012-07-22T20:10:38.337 に答える
1

さて、私は以前にそのような状況にあり、ページをロックするための完璧な解決策を見つけました。実際、これは非常に簡単です。匿名関数と基本的なjQueryバインディングを操作する必要があります。もう1つの重要なことは、JavaScriptを介してロック可能なHTMLデータを動的にロードすることです。そのため、View Sourceモードを使用しても機能しません...解決策は次のとおりです。

(function($){ //this way nobody can access you variables inside
    var PAGE_CONTENT = "";
    var IS_LOCK_MODE = false;

    var $lockButton = $('#your_lock_button');
    $lockButton.bind('click', function(){
        if(!IS_LOCK_MODE){
            PAGE_CONTENT = $('#your_content_container').html();
            $('#your_content_container').empty();
            IS_LOCK_MODE = true;
        } else {
            $('#your_content_container').html(PAGE_CONTENT);
            PAGE_CONTENT = "";
            IS_LOCK_MODE = false;
        }
    });
})(jQuery);
于 2012-07-22T20:59:20.907 に答える