Закрыть открытый 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>

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

Answer 1

Перед использованием show(), используйте hide() для div (ов), которые вы хотите скрыть, например:

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

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

Answer 2

Вам не нужно писать так много обработчиков кликов. В привязке укажите соответствующий 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 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 с контентом имеют класс 'content', просто спрячьте все div с классом содержимого, прежде чем показывать текущий.

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

Answer 5

Переключение

может помочь: 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
});