Question

我正在为一个新网站玩这个，并且工作得很好＆amp;易于实施：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");

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

2 个答案: