открытие div закрытия других

Question

Я пытаюсь сделать скользящую панель с использованием .animate функции, потому что я хочу, чтобы она слайд влево/вправо (jQuery позволяет slideUp и slideDown, но никаких других направлений). Я сделал анимацию, как это:

jQuery('#slide1-button').toggle(
function(){jQuery('#slide1').animate({right: 700},600);}, 
function(){jQuery('#slide1').animate({right: -700},600);} 
); 

jQuery('#slide2-button').toggle(
function(){jQuery('#slide2').animate({right: 700},600);}, 
function(){jQuery('#slide2').animate({right: -700},600);} 
); 

jQuery('#slide3-button').toggle(
function(){jQuery('#slide3').animate({right: 700},600);}, 
function(){jQuery('#slide3').animate({right: -700},600);} 
); 

Теперь я хотел бы открытую панель, чтобы скрыть, когда я открываю другой.

EDIT: здесь разметка:

<ul> 
<li id="slide1-button" class="slideButton">Entreprise</li> 
<li id="slide2-button" class="slideButton">Culture</li> 
<li id="slide3-button" class="slideButton">Institution</li> 
</ul> 

<div id="slide-wrapper"> 

<div id="slide1" class="slide"> 
<span class="closeall"></span><!-- content --> 
</div> 

<div id="slide2" class="slide"> 
<span class="closeall"></span><!-- content --> 
</div> 

<div id="slide3" class="slide"> 
<span class="closeall"></span><!-- content --> 
</div> 

</div> <!-- /#slide-wrapper --> 

Answer 1

, не меняя разметку на всех, вы можете сделать это:

jQuery('#slide1-button, #slide2-button, #slide3-button').toggle(function(){ 
    var id = this.id.replace('-button',''); 
    jQuery('#slide1, #slide2, #slide3').filter(':visible').not('#' + id).animate({right: -700},600); 
    jQuery('#' + id).animate({right: 700},600); 
}, function(){ 
    jQuery('#' + this.id.replace('-button','')).animate({right: -700},600); 
}); 

... Но я бы посоветовал поставить класс на вашем slide# и slide#-button элементы, если на ваших пуговицах были .slideButton, и ваши дивизии имели .slide, вы могли бы сделать это:

jQuery('.slideButton').toggle(function(){ 
    var id = this.id.replace('-button',''); 
    jQuery('.slide:visible').not('#' + id).animate({right: -700},600); 
    jQuery('#' + id).animate({right: 700},600); 
}, function(){ 
    jQuery('#' + this.id.replace('-button','')).animate({right: -700},600); 
}); 

Не зная, какие элементы являются кнопками слайдов, я не могу сказать дальше, как оптимизировать это, но использование чего-то вроде rel="#slide1" было бы еще чище/меньше кода.

Answer 2

Если присвоить класс к слайдам, как «слайд», вы можете обобщить свой код и написать что-то вроде (не проверено):

jQuery('.slide [id$=button]').toggle(
    function(){ jQuery(this).closest('.slide').animate({ right: 700 }, 600); 
       jQuery('.slide [id$=button]').not(this).toggle(); }, 
    function(){ jQuery(this).closest('.slide').animate({ right: -700 }, 600); } 
); 

Answer 3

Я не знаком с JQuery, но вот возможный способ реорганизовать код:

1. Создать массив для ваших слайдов
2. Установите «открытое» свойство для каждого слайда
3. Всякий раз, когда вы открываете слайд, прокручиваете массив, и если слайд имеет свойство «открыть», установленное на «true», закройте его.

Возможный код:

var slides = []; 
slides[0] = $("#slide1")[0]; 
slides[1] = $("#slide2")[0]; 
slides[2] = $("#slide3")[0]; 

for (var i=0;i<slides.length;i++) { 
    slides[i].open = false; 
} 

function closeOtherSlides(currentSlide) { 
    for (var i=0;i<slides.length;i++) { 
    if (slides[i] !== currentSlide && slides[i].open === true) { 
     slides[i].animate({right: -700},600); 
     slides[i].open = false; 
    } 
    } 
    currentSlide.open = true; 
} 

jQuery('#slide1-button').toggle(
function(){jQuery('#slide1').animate({right: 700},600);closeOtherSlides(slides[0]);}, 
function(){jQuery('#slide1').animate({right: -700},600);} 
); 

jQuery('#slide2-button').toggle(
function(){jQuery('#slide2').animate({right: 700},600);closeOtherSlides(slides[1]);}, 
function(){jQuery('#slide2').animate({right: -700},600);} 
); 

jQuery('#slide3-button').toggle(
function(){jQuery('#slide3').animate({right: 700},600);closeOtherSlides(slides[2]);}, 
function(){jQuery('#slide3').animate({right: -700},600);} 
);