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，但这是一种重构代码的可能方法：

为幻灯片创建数组
为每张幻灯片设置“打开”属性
每当您打开幻灯片时，循环播放数组，如果幻灯片的“打开”属性设置为“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);}
);

打开一个关闭其他人的div

3 个答案: