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

If I use jQuery，代码有效：

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

If I use 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();

使用Zepto切换元素的可见性

1 个答案: