이 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 객체를 참조합니다.