打开一个 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);}
);

现在我希望在打开另一个面板时隐藏打开的面板。

编辑：这是标记：

<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 并且你的 div 有 .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. 每次打开幻灯片时，循环遍历数组，如果幻灯片的“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);}
);