jquery - 使用 Zepto 切换元素的可见性

Question

的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");
  });
}

如果我使用 jQuery，则代码有效：

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

如果我使用 Zepto，则代码不起作用：

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

为什么？

Answer 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();