JQuery - Показать / Скрыть несколько div - PullRequest
Новая
       11

JQuery - Показать / Скрыть несколько div

1 голос
/ 15 сентября 2011

у меня это работает "в основном".Мне нужно добавить некоторые дополнительные функции, хотя.На этой странице есть текст, который будет виден, когда пользователь откроет страницу.Затем представьте несколько «кнопок», с которыми будет связан текст.

Я бы хотел, чтобы текст «служб» стал видимым, когда вы говорите, нажимаете кнопку 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 -->

Эту страницу можно посмотреть здесь Страница проблемы

Любые советы или предложения будут искренне оценены.

1 Ответ

0 голосов
/ 15 сентября 2011 
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/

...