Закрывать открытый div, когда отображается новый

Question

Привет, я очень новичок в jq/js. Я использую hide / show, чтобы открывать / закрывать div, они работают нормально, пока я не попытаюсь открыть div, когда один уже открыт - они заканчиваются наложением.

Есть ли способ настроить его на закрытие любых открытых div перед открытием нового или, возможно, использовать hide, только если div открыт в первую очередь?

Я использую jQuery:

<script>
$(document).ready(function() {

    $('.content').hide();

    $("#show-services").click(function () {
          $(".content#services").show("slide", { direction: "right" }, 1000);
    });    


    $("#show-about").click(function () {
          $(".content#about").show("slide", { direction: "right" }, 1000);
    });  


    $("#show-contact").click(function () {
          $(".content#contact").show("slide", { direction: "right" }, 1000);
    });     

    $("#hide-services").click(function () {
          $(".content#services").hide("slide", { direction: "right" }, 1000);
    });

    $("#hide-about").click(function () {
          $(".content#about").hide("slide", { direction: "right" }, 1000);
    });

    $("#hide-contact").click(function () {
          $(".content#contact").hide("slide", { direction: "right" }, 1000);
    });

});
</script>

Для ссылки на сайте http://www.pudle.co.uk/int - вы можете увидеть конфликт, если вы нажмете на ссылку в левом верхнем углу, а затем нажмите на другую из ссылок.

Answer 1

Перед использованием show()использовать hide() на div(s) вы хотите скрыть что-то вроде:

$("#div1, #div2, #divX").hide(); // hide all these divs
$("#thisDiv").show(); // now show this one

Обратите внимание, что вы можете комбинировать несколько селекторов с запятой, как $("#div1, #div2, #divX")

Answer 2

Переключение может помочь: http://api.jquery.com/toggle/

или что-то вроде этого:

$('a').click(function () {
    $(".content").hide("slide", { direction: "right" }, 1000); //hide them all
    $(".content#"+this.id).show("slide", { direction: "right" }, 1000);//show one
});   

Answer 3

Я полагаю, что вы найдете:visible селектор очень полезным для этого. пример

$("#show-services").click(function (e) {
e.preventDefault(); // this is for the URL to not change.
      $(".content:visible .hide a").click(); // you get the visible first div in .content and make a click on the HIDE link
      $(".content#services").show("slide", { direction: "right" }, 1000);

});    

Хороший и простой справочник Jquery можно найти на http://visualjquery.com/ перейти к селекторам:D

Answer 4

Вам не нужно писать так много обработчиков кликов. В привязке укажите соответствующий div, например: href="#services"

$("#links a").click(function(e){
   e.preventDefault();
   whichdiv = $(this).attr("href");
   $('.content').hide('slide', {direction: 'right'}, 1000);
   $(whichdiv).show("slide", { direction: "right" }, 1000);
})

Answer 5

Поскольку все ваши div с контентом имеют класс "content", просто спрячьте все div с классом содержимого, прежде чем показывать текущий.

$("#show-services").click(function () {
    $('.content').hide('slide', {direction: 'right'}, 1000);
    $(".content#services").show("slide", { direction: "right" }, 1000);
});