jQuery Hide and Show Divs

Question

こんにちは、ここ数日間、私は自分のサイトにいくつか問題があり、それがどこにあるのか非常に快適なポイントに達しています。私の現在のjQueryのスクリプトは次のとおりです。

jQuery(document).ready(function() { 
    $("#firstpagename, #firstpagename2").click(function() { 
     $("div#white").toggle(); 
    }); 

    $("#secondpagename, #secondpagename2").click(function() { 
     $("div#v2black").toggle(); 
    }); 

    $("#thirdpagename, #thirdpagename2").click(function() { 
     $("div#v3black").toggle(); 
    }); 
}); 

私はこれがクリーンかつ最善の方法ではないかもしれませんが、私は今だけの週のためのjQueryの使用を開始しているとして、それが動作し、私は過去5日間で狂ってきました知っています。私が今やろうとしています何

はdiv要素の白、v2blackとv3blackオープンにすることです。開いているときは、同時に開いている可能性のある他のdiv（上記参照）を閉じます。ここで

は、それが参照するために必要とされている包み、私のHTMLです：

<div class="altstevenav" style="display:none"> 
    <div class="stevenav"> 
     <ul class="navigation"> 
      <li> 
       <a href="#firstpagename" id="firstpagename">Steve A</a> 
      </li> 
      <li> 
       <a href="#secondpagename" id="secondpagename">Tattoos</a> 
      </li> 
      <li> 
       <a href="#thirdpagename" id="thirdpagename">Sketchbook</a> 
      </li> 
     </ul> 
    </div> 
</div> 
</div> 
<!--MAIN CLOSING DIV--> 
</div> 
<!--CONTENT CLOSING DIV--> 
    <div class="stevenav"> 
     <ul class="navigation"> 
      <li> 
       <a href="#firstpagename" id="firstpagename2">Steve A</a> 
      </li> 
      <li> 
       <a href="#secondpagename" id="secondpagename2">Tattoos</a> 
      </li> 
      <li> 
       <a href="#thirdpagename" id="thirdpagename2">Sketchbook</a> 
      </li> 
     </ul> 
    </div> 

<!--ALL DIVS ARE CLOSE HERE--> 
<!--Divisional Panels--> 
<div id="white"> 
<div style="width:968px; margin: 0 auto;"> 
<div class="panel" style="color:#000000;"> 
<div style="width:450px; float:left;"> 
<img src="<?php echo the_field('image_one_of_biography'); ?>" width="425" alt="Biography Image" /> 
<br /><br /> 
<img src="<?php echo the_field('image_two_of_biography'); ?>" width="425" alt="Biography Image" /> 
<br /><br /> 
<img src="<?php echo the_field('image_three_of_biography'); ?>" width="425" alt="Biography Image" /> 
</div> 
<div style="width:450px; float:left; text-align:left;"> 
<?php echo the_field('biography_content'); ?> 
</div> 
</div> 
</div> 
</div> 
<div id="v2black"> 
<div style="width:968px; height:1000px; margin: 0 auto;"> 

</div> 
</div> 

<div id="v3black"> 
<div style="width:968px; height:1000px; margin: 0 auto;"> 

</div> 
</div> 

私はこれは非常に単純であると考えたいが、ちょうど私がこのことについてに行くべきかの方向のビットたいと思います。..

ナットシェルでの私の質問：白のうち、一度につだけのdivオープン、v2blackおよびv3black。

Answer 1

...

jQuery(document).ready(function() { 
    $("#firstpagename, #firstpagename2").click(function() { 
     $('.common').hide(); 
     $("div#white").toggle(); 
    }); 

    $("#secondpagename, #secondpagename2").click(function() { 
     $('.common').hide(); 
     $("div#v2black").toggle(); 
    }); 

    $("#thirdpagename, #thirdpagename2").click(function() { 
     $('.common').hide(); 
     $("div#v3black").toggle(); 
    }); 
}); 

は、次にHTMLにクラスを追加...

<div id="white" class="common"> 
</div> 
<div id="v2black" class="common"> 
</div> 
<div id="v3black" class="common"> 
</div> 

Answer 2

トグルを使用する代わりに、おそらくjQuery hideとshowを見たいようです。

Answer 3

変更への最初の1：

$("#firstpagename, #firstpagename2").click(function() { 
    $("#white").show(); 
    $("#v2black, #v3white").hide(); 
}); 

は、その後他の人のために繰り返します。あなたは一般的なクラスを割り当てると、必要な再オープン1クリックで閉じそれらすべてを強制することができ

Answer 4

あなたは、クラス（例えば「トグル」）を切り替え、それはかなり簡単に動作するはずたい要素を与える場合：

$(".toggleable").click(function(){ 
     $(".toggleable").hide(); //Hide all elements with the class toggleable. 
     $(this).toggle(); //Show the element that the user clicked on. 
});