顯示一個塊，而在部分上每一個點擊下隱藏其他塊使用jQuery出現第二塊，第三個，然後第四

Question

我要讓導航菜單的4塊，而我有一個塊已經顯示出，然後點擊打開第二塊，從第二個選擇，然後點擊再次出現第三塊與同爲第四塊...... 這裏是我的代碼，會很高興，如果將工作，但它不是... :( 請幫助，提供建議。感謝 可以在下一環節的下方，或點擊此處查看它的代碼：http://jsfiddle.net/9afaF/

<div class="games_content"> 

      <script> 
       $(function() { 
        $("#block_2 div,#block_3 div,#block_4 div").hide(); 

        $("#block_1 div").click(function(){ 
         $("#block_2 div,#block_3 div,#block_4 div").hide(); 
         $("#block_2 div."+$(this).attr('id')).show("fast"); 

         $("#block_2 div").click(function(){ 
          $("#block_3 div,#block_4 div").hide(); 
          $("#block_3 div."+$(this).attr('id')).show("fast"); 

          $("#block_3 div").click(function(){ 
           $("#block_4 div").hide(); 
           $("#block_4 div."+$(this).attr('id')).show("fast"); 
          }) 
         }); 
        }); 
       }); 
      </script> 
      <div style="float:left;width:237px;height:420px;background: rgba(255, 0, 0, .5);margin-right:15px;" id="block_1"> 
       <div id="category1">Category 1</div> 
       <div id="category2">Category 2</div> 
       <div id="category3">Category 3</div> 
       <div id="category4">Category 4</div> 
       <div id="category5">Category 5</div> 
      </div> 

      <div style="float:left;width:164px;height:500px;background: rgba(255, 0, 0, .5);margin-right:2px;margin-top:10px;margin-left:4px;" id="block_2"> 
       <div class="category1" id="subcat1">Sub Category 1</div> 
       <div class="category1" id="subcat2">Sub Category 2</div> 
       <div class="category1" id="subcat3">Sub Category 3</div> 
       <div class="category2" id="subcat4">Sub Category 4</div> 
       <div class="category2" id="subcat5">Sub Category 5</div> 
       <div class="category3" id="subcat6">Sub Category 6</div> 
       <div class="category3" id="subcat7">Sub Category 7</div> 
       <div class="category4" id="subcat8">Sub Category 8</div> 
       <div class="category4" id="subcat9">Sub Category 9</div> 
       <div class="category5" id="subcat10">Sub Category 10</div> 
       <div class="category5" id="subcat11">Sub Category 11</div> 
      </div> 

      <div style="float:left;width:160px;height:500px;background: rgba(255, 0, 0, .5);margin-right:2px;margin-top:10px;" id="block_3"> 
       <div class="subcat1" id="game1">Sub Sub Categoey 1</div> 
       <div class="subcat1" id="game2">Sub Sub Categoey 2</div> 
       <div class="subcat2" id="game3">Sub Sub Categoey 3</div> 
       <div class="subcat2" id="game4">Sub Sub Categoey 4</div> 
       <div class="subcat3" id="game5">Sub Sub Categoey 5</div> 
       <div class="subcat4" id="game6">Sub Sub Categoey 6</div> 
      </div> 

      <div style="float:left;width:240px;height:400px;background: rgba(255, 0, 0, .5);margin-left:17px;" id="block_4"> 
       <div class="game1">Game1</div> 
       <div class="game2">Game2</div> 
       <div class="game3">Game3</div> 
       <div class="game4">Game4</div> 
      </div> 

Answer 1

你沒有jQuery庫加載到您的小提琴。

看到它在這裏工作FIDDLE

$(function() { 
    $("#block_2 div,#block_3 div,#block_4 div").hide(); 

    $("#block_1 div").click(function(){ 
     $("#block_2 div,#block_3 div,#block_4 div").hide(); 
     $("#block_2 div."+$(this).attr('id')).show("fast"); 

     $("#block_2 div").click(function(){ 
      $("#block_3 div,#block_4 div").hide(); 
      $("#block_3 div."+$(this).attr('id')).show("fast"); 

      $("#block_3 div").click(function(){ 
       $("#block_4 div").hide(); 
       $("#block_4 div."+$(this).attr('id')).show("fast"); 
      }) 
     }); 
    }); 
});