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/