slideReveal脚本-如何在打开新幻灯片之前关闭所有打开的“幻灯片”？

Question

我正在为一个新站点进行尝试，并且运行良好且易于实现： http : //nnattawat.github.io/slideReveal/

但是，我无法确定的一个问题是，您有多个滑块，而上一个事件已经“退出”了，您如何首先确保所有其他滑块都“关闭”，然后打开当前滑块？

我可以做一个if / then检查每个人，但是我认为必须有一个更优雅的方法...

Answer 1

我认为解决此问题的最佳方法是创建“页面级控制器”。 它的作用是充当页面中发生的事件的容器和控制器。

因此，由于API似乎没有像“ onSlideOpen”那样发出的任何钩子或事件，因此您基本上必须“代理”滑动闭合的一侧（并增加关闭另一个滑动区域的依赖性）。 这就是您的控制器将要处理的。

var PageController = function(){
  var $leftSlide = $('#leftSlider').slideReveal(), // You'll want to sub in
      $rightSlide = $('#rightSlider').slideReveal(); // your selector names


  return {
    openLeft: function() {
      $leftSlide.slideReveal('show');
      $rightSlide.slideReveal('hide');
    },
    openRight: function() {
      $rightSlide.slideReveal('show');
      $leftSlide.slideReveal('hide');
    }
  };
};

var pageController = new PageController();

pageController.openLeft(); // will slide reveal left side
pageController.openRight(); // will simultaneously open right and close left

现在，您甚至可以进行诸如检查幻灯片的状态之类的操作，以防您有其他交叉依赖性。

很多人可能会通过发出事件并捕获事件来处理这种事情，但是我真的不喜欢pub-sub模型。 它往往很快变得非常脆。

Answer 2

在所有滑块上使用.slideReveal（“ hide”），然后在要显示的滑块上使用.slideReveal（“ show”）。

一种方法是给所有滑块一个类并将其用作选择器

即

$(".slider").slideReveal("hide");
$("#sliderYouWantToShow").slideReveal("show");