このjQueryはうまくいくはずです

Question

私はこのjQueryの部分で数時間トロールしてしまいましたが、まだ動作させることはできません。

トグルをクリックすると、残りの部分が開きます。

私は本当に重要なプロジェクトのためにこれについていくつかの助けが必要です。

私はjQueryとあまり良くはありません。私はできる限りそれを整えましたが、私は本当に立ち往生しています。

jQuery(function($) 
{ 
    var about = $("#about"), 
     contact = $("#contact"), 
     download = $("#download"), 
     abouttoggle = $("#abouttoggle"), 
     contacttoggle = $("#contacttoggle"), 
     downloadtoggle = $("#downloadtoggle"); 

    abouttoggle.click(
     function(event) 
     { 
      event.preventDefault(); 
      if (about.is(":visible")) 
      { 
       about.fadeOut(500); 
       abouttoggle.css("background-color","transparent").fadeIn(500); 
      } 
      else 
      { 
       about.fadeIn(500); 
       abouttoggle.css("background-color","#E0E0E0").fadeIn(500); 
      } 

      contact.fadeOut(500); 
      contact.css("background-color","transparent").fadeIn(500); 
      download.fadeOut(500); 
      download.css("background-color","transparent").fadeIn(500); 
     } 
    ); 

    contacttoggle.click(
     function(event) 
     { 
      event.preventDefault(); 
      if (contact.is(":visible")) 
      { 
       contact.fadeOut(500); 
       contacttoggle.css("background-color","transparent").fadeIn(500); 
      } 
      else 
      { 
       contact.fadeIn(500); 
       contacttoggle.css("background-color","#E0E0E0").fadeIn(500); 
      } 

      about.fadeOut(500); 
      abouttoggle.css("background-color","transparent").fadeIn(500); 
      download.fadeOut(500); 
      download.css("background-color","transparent").fadeIn(500); 
     } 
    ); 

    downloadtoggle.click(
     function(event) 
     { 
      event.preventDefault(); 
      if (download.is(":visible")) 
      { 
       download.fadeOut(500); 
       downloadtoggle.css("background-color","transparent").fadeIn(500); 
      } 
      else 
      { 
       download.fadeIn(500); 
       downloadtoggle.css("background-color","#E0E0E0").fadeIn(500); 
      } 

      contact.fadeOut(500); 
      contact.css("background-color","transparent").fadeIn(500); 
      about.fadeOut(500); 
      about.css("background-color","transparent").fadeIn(500); 
     } 
    ); 

}); 

と（関連）HTML：：

<div align="center" class="info"> 
    <a id="abouttoggle" href="#" class="aboutbutton">about</a> | <a id="contacttoggle" href="#" class="contactbutton">contact</a> | <a id="downloadtoggle" href="#" class="downloadbutton">downloads</a> 
    </div> 

    <div align="center" class="about" id="about"> 
    about stuff 
    </div> 

    <div align="center" class="contact" id="contact"> 
    contact stuff 
    </div> 

    <div align="center" class="download" id="download"> 
    download stuff 
    </div> 

Answer 1

あなたはあなたがそれらをフェードアウトした直後にメニュー要素のfadeIn使用している

は、ここでは、コードです。

メイクこれらの行のすべて：このような

contact.css("background-color","transparent").fadeIn(500); 

外観：

contacttoggle.css("background-color","transparent").fadeIn(500); 

あなたはcontacttoggle.click機能で正しくそれをやっています。

変数を事前定義する代わりに$(this)を使用することもできます。 $(this)は、関数が動作しているjQueryオブジェクトを参照します。