Jquery 打开一个div关闭其他div

我正在尝试使用.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);}
);

现在，我想在打开另一个面板时隐藏打开的面板

编辑：以下是标记：

<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 -->

企业
文化
机构

如果您为幻灯片分配了一个类，如“幻灯片”，您可以概括您的代码并编写类似（未测试）的内容：

---

如果您为幻灯片分配一个类，如“幻灯片”，您可以概括您的代码并编写类似（未测试）的内容：

---

我不熟悉jQuery，但这里有一种重构代码的可能方法：

为幻灯片创建一个数组

为每张幻灯片设置“打开”属性

无论何时打开幻灯片，都要在数组中循环，如果幻灯片的“open”属性设置为“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);}
);

var-slides=[]；
幻灯片[0]=$（“#幻灯片1”）[0]；
幻灯片[1]=$（“#幻灯片2”）[0]；
幻灯片[2]=$（“#幻灯片3”）[0]；
对于（var i=0；i我不熟悉jQuery，但这里有一种重构代码的可能方法：

为幻灯片创建一个数组
为每张幻灯片设置“打开”属性
无论何时打开幻灯片，都要在数组中循环，如果幻灯片的“open”属性设置为“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);}
);

var-slides=[]；
幻灯片[0]=$（“#幻灯片1”）[0]；
幻灯片[1]=$（“#幻灯片2”）[0]；
幻灯片[2]=$（“#幻灯片3”）[0]；
对于（var i=0；i，您可以在不更改标记的情况下执行以下操作：

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);
});

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);
});

但是…我建议在你的
幻灯片#
和
幻灯片按钮
元素上放一个类，如果你的按钮有
.slideButton
，而你的div有
.slide
，你可以这样做：

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);
});

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”
的东西会更干净/更少的代码。
完全不更改标记，您可以这样做：

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);
});

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);
});

但是…我建议在你的
幻灯片#
和
幻灯片按钮
元素上放一个类，如果你的按钮有
.slideButton
，而你的div有
.slide
，你可以这样做：

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);
});

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”的方法
会更干净/更少的代码。
这个解决方案似乎很合适，但我有一个新问题：要再次切换，我需要单击两次。例如，我打开slide1，然后单击slide2，然后想再次打开slide1。第一次单击slide1按钮不起作用，第二次则进行切换…我将编辑我的帖子，向您显示htmlhereason:“由于.toggle（）在内部使用单击处理程序来执行其工作，因此我们必须取消绑定单击以删除与.toggle（）附加的行为，以便其他单击处理程序可以在crossfire中被捕获。”我不确定将该取消绑定（）放在何处方法。此解决方案似乎合适，但我有一个新问题：要再次切换，我需要单击两次。例如，我打开了slide1，然后是slide2，然后想再次打开slide1。第一次单击slide1按钮没有任何作用，第二次则进行切换…我将编辑我的帖子以向您显示htmlhere。原因如下：“因为.toggle（）在内部使用单击处理程序执行其工作时，我们必须取消绑定单击以删除附加了.toggle（）的行为，以便其他单击处理程序可以在crossfire中被捕获。“我不确定将unbid（）方法放在何处。”。