使用 Zepto 切换元素的可见性答案

【问题标题】：Toggle visibility of element with Zepto使用 Zepto 切换元素的可见性
【发布时间】：2013-10-14 17:02:50
【问题描述】：

HTML：

<a id="the_link" class="folded" href="#">Click me</a>
<div id="content">This is some content to be toggled.</div>

分别显示或隐藏内容的两个函数：

function shower() {
  $("body").on("click", "#the_link.folded", function(event) {
    $("#content").show();
    $("#the_link").html("Hde info").removeClass("folded").addClass("unfolded");
  });
}

function hider() {
  $("body").on("click", "#the_link.unfolded", function(event) {
    $("#content").hide();
    $("#the_link").html("See more info").removeClass("unfolded").addClass("folded");
  });
}

If I use jQuery，代码有效：

$(document).ready(function() {  
  shower();
  hider();
})

If I use Zepto，代码不起作用：

Zepto(function($){  
  shower();
  hider();
})

为什么？

【问题讨论】：

标签： jquery zepto

【解决方案1】：

完全奇怪，我以前没有真正使用过 zepto。但是你是对的，图书馆本身有问题（或者这就是他们的运作方式）。

问题是即使元素不存在也无法绑定。

而且，如果您动态更改元素的类，即使类已更改，相同的事件仍将绑定到它。所以你必须使用 off 来取消绑定事件，然后在另一个函数中重新绑定它，反之亦然。 jsfiddle

function shower() {
  $("body").on("click", "#the_link.folded", function(event) {
      console.log('shower function');
    $("#content").show();
    $("#the_link").removeClass("folded").addClass("unfolded").html("Hde info");
       $("body").off("click", "#the_link.folded");
      hider();
  });
}

function hider() {

  $("body").on("click", "#the_link.unfolded",function(event) {
      console.log('hider function');
    $("#content").hide();
    $("#the_link").removeClass("unfolded").addClass("folded").html("See more info");
      $("body").off("click", "#the_link.unfolded");
      shower();
  });
}


  shower();
  hider();

【讨论】：