JQuery - 顯示/隱藏多個div

Question

我有這個「主要」工作。我需要爲它添加一些額外的功能。在這個頁面上有一些文字，當用戶打開這個頁面的時候就會顯示出來。然後呈現多個「按鈕」，其中將具有與它們相關聯的文本。

我希望當您按下esc按鈕或在按鈕外單擊時，「服務」文本變得可見。

這是代碼。

$(document).ready(function() { 
    $(".toggles a").click(function(e) { 
     var id = this.hash; 
      $("#topics div:visible").not(id).fadeOut(function(){ 
      $(id).fadeIn(); 
      }); 
     e.preventDefault(); 
    }); 
$("#topics div:not(#services-copy)").hide(); 
}); 

這裏是標記。

<div id="main-content"> 
<div class="toggles"> 
<ul> 
    <li><a href="#archdesign"> <img src="images/whatwedo/archdesign.jpg" /> 
    <span>Architectural Design</span> 
    </a> </li> 
    <li><a href="#landscpdesign"> <img src="images/whatwedo/landscpdesign.jpg" /> 
    <p>Landscape Architecture</p> 
    </a> </li> 
    <li><a href="#lpdesign"> <img src="images/whatwedo/lpdesign.jpg" /> 
    <p>Land Planning</p> 
    </a> </li> 
    <li><a href="#intdesign"> <img src="images/whatwedo/intdesign.jpg" /> 
    <p>Interior Design</p> 
    </a> </li> 
    <li><a href="#gisdesign"> <img src="images/whatwedo/gisdesign.jpg" /> 
    <p>GIS</p> 
    </a> </li> 
</ul> 
</div> 
<div id="topics"> 
<div id="services-copy"> 
<h2>Services</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet eleifend enim nec laoreet. Donec augue felis, volutpat vel eleifend vitae, feugiat eu ipsum. </p> 
</div> 
<div id="archdesign"> 
    <h2>Architectural Design</h2> 
    <br /> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet eleifend enim nec laoreet. Donec augue felis, volutpat vel eleifend vitae, feugiat eu ipsum.</p> 
</div> 
<div id="landscpdesign"> 
    <h2>Landscape Architecture</h2> 
    <br /> 
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet eleifend enim nec laoreet. Donec augue felis, volutpat vel eleifend vitae, feugiat eu ipsum.</p> 
</div> 
<div id="lpdesign"> 
    <h2>Land Planning</h2> 
    <br /> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet eleifend enim nec laoreet. Donec augue felis, volutpat vel eleifend vitae, feugiat eu ipsum.</p> 
</div> 
<div id="intdesign"> 
    <h2>Interior Design</h2> 
    <br /> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet eleifend enim nec laoreet. Donec augue felis, volutpat vel eleifend vitae, feugiat eu ipsum.</p> 
</div> 
<div id="gisdesign"> 
    <h2>GIS</h2> 
    <br /> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet eleifend enim nec laoreet. Donec augue felis, volutpat vel eleifend vitae, feugiat eu ipsum.</p> 
</div> 
</div> 
</div><!-- End of Main-Content --> 

此頁面可以在這裏Problem Page

看到任何提示或建議，將衷心感謝。

Answer 1

function fader(id) { 
    $("#topics div:visible").not(id).fadeOut(function() { 
     $(id).fadeIn(); 
    }); 
} 

$(document).ready(function() { 
    $(".toggles a").click(function(e) { 
     fader(this.hash); 
     e.stopPropagation(); 
     e.preventDefault(); 
    }); 
    $("body").click(function(e) { 
     fader("#services-copy"); 
    }); 
    $(document).keydown(function(e) { 
     if (e.keyCode == 27) { 
      fader("#services-copy"); 
     } 
    }); 

    $("#topics div:not(#services-copy)").hide(); 
}); 

http://jsfiddle.net/gfzpZ/4/