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/