2016-04-22 28 views
0

私はどのように非表示にして、後でユーザーがボタン(チェックボックス)をクリックしたときにコンテンツを表示するかわかりません。私はコードを作ったが動作しません。チェックボックスをオンにすると、コンテンツは非表示になりません。 フリーリストのコンテンツが表示されずに2番目に表示されるチェックボックスをユーザーがクリックしたときにmakeします。ユーザーがチェックボックスを再度クリックすると、フリーリストのコンテンツが表示され、2番目が非表示になります。jQuery hide/show content

<script> 
$(document).ready(function(){ 
    $("#skin_rasa").click(function() { 
     if ($('#skin_rasa').css('display') == 'none') 
     { 
      $("#_hsync_skin_menu_id").hide("slow", function() { 
       $("#_hsync_skin_menu_rasa").show("slow"); 
      });   
     } 
     if ($('#skin_rasa').css('display') != 'none') 
     { 
      $("#_hsync_skin_menu_rasa").hide("slow", function() { 
       $("#_hsync_skin_menu_id").show("slow"); 
      });   
     } 
    }); 
});  
</script> 

@EDIT:私は間違いをしたところ、私が見ました。今は動作しますが、1回目のクリックでのみ動作します。

<script> 
$(document).ready(function(){ 
    $("#skin_rasa").click(function() { 
     if ($('#_hsync_skin_menu_id').css('display') != 'none') 
     { 
      $("#_hsync_skin_menu_id").hide("slow", function() { 
       $("#_hsync_skin_menu_rasa").show("slow"); 
      });   
     } 
     if ($('#_hsync_skin_menu_id').css('display') == 'none') 
     { 
      $("#_hsync_skin_menu_rasa").hide("slow", function() { 
       $("#_hsync_skin_menu_id").show("slow"); 
      });   
     } 
    }); 
});  
</script> 
+0

だけコメント、代わりにオブジェクトを決めることが表示されているかどうかをチェックするのをそれを表示するか非表示にするかは、代わりに 'toggle'の形式を使用することができます。 – Goose

+0

ありがとう!しかし、今私は2番目のクリック – SilvioCro

答えて

0

単にあなたが
更新トグル使用することができます。作業例:http://jsfiddle.net/j999y/1725/

<input type="checkbox" id="myCheckBox">Toggle 
    <p id="myContent"> 
    Here is your content 
    </p> 
    <p id="anotherContent" > 
    Here is another content content 
    </p> 

JS:

$("#myCheckBox").click(function() {  
     $('#myContent').toggle("slow"); 
     $('#anotherContent').toggle("slow"); 
    }); 
+0

上の第2のコンテンツを非表示にする方法を知らないが、私はチェックボックスを再び '\t $(ドキュメント).ready(関数(){クリックしたときに二contectを非表示にする方法を知りません。 \t \t \t $( "#のskin_rasa")。(関数(){ \t \t \t $( "#_ hsync_skin_menu_id")をクリックしてください。( "遅い"、機能(){ \t \t \t \t $( "#_ hsync_skin_panelを切り替えます").show(" slow "); \t \t \t}); \t \t \t \t \t}); \t}); \t \t \t \t – SilvioCro

+0

代わりに私はトグルを設定してください。ありがとう! – SilvioCro

+0

更新の例を見てください –