jQuery 切换 .click() 函数

Question

我不确定是否需要一个"回调函数"，但基本上我想要模拟像.hover()效果那样反转功能，使用.click()效果。这是可能的吗？因此，如果用户再次单击链接，则会发生与刚刚发生相反的事情，即div关闭而不是打开。使用.click()可以完成吗？

$(document).ready(function(){
    $('.content_accrd').css({"height":"0px"});
$('.paneltop').click( function() {
    $(this).css({"background-position":"0px -21px"})
    .siblings().animate({"height":"100px"}, 200)
}, function() {
$(this).css({"background-position":"0px 0px"})
    .siblings().animate({"height":"0px"}, 200);

})
})

- A_funs

Answer 1

使用.toggle()，而不是.click()。

描述：将两个或更多的处理程序绑定到匹配的元素上，在交替点击时执行。

- Matt Ball

---

还有，那是我想要的技术上的东西吗？回调函数吗？还是叫其他什么名字？ - A_funs

我认为“回调”不是你想要的术语。回调（至少在JavaScript中）是一个稍后执行的函数。你代码中的三个匿名函数都是回调的例子。第一个是当DOM准备就绪时执行的回调。 - Matt Ball

JS回调函数简介：http://recurial.com/programming/understanding-callback-functions-in-javascript/（维基百科文章可能有些晦涩...） - Matt Ball

.toggle()自v.1.8版本起已被弃用 - 请改用条件语句（if..else..） - EsaulFarfan

Answer 2

尝试切换

$(".paneltop").toggle(function(){
    //first click happened
},function(){
    //second click happened
});

- genesis

---

有人可以解释一下他/她的负评吗？这样我就可以改进我的回答了。 - genesis

那将是我的反对票 - 抱歉，我本来想评论的，但被分心了。我给你的原始答案投了反对票，因为它是完全错误的。为什么不编辑一下呢？无论如何，在我已经发布（并且反对了你的错误答案）之后，它与我的答案传达了相同的信息。 - Matt Ball

@MattBall: 我已经删除了它，因为很久以前就被踩过，而且被点赞的几率非常小。 - genesis

有2个踩。其中一个是我的。当答案被修复时，我很乐意取消踩。我想你的另一个踩贴者也会这样做。 - Matt Ball

@MattBall：好的。那现在你还为什么要保留对我帖子的“踩”呢？ - genesis

Answer 3

不，点击操作始终会执行相同的操作。如果您希望它具有交替效果，则必须检查元素的当前状态并相应地将其切换到新状态。

这看起来像是：

  $('#foo').click(function () {
    if ( $('#foo').is(':visible') ) {
      $('#foo').hide();
    } else {
      $('#foo').show();
    }
  });

根据您想要实现的效果，这可以是您想要的任何更改。

- njr101

---

1. 你在哪里看到ID为“foo”的元素？
2. 为什么你会使用这个而不是.toggle()？

- Matt Ball

1. 这只是一个演示，可以应用于任何元素。
2. 是的，阅读OP的问题，他们特别要求能够反转操作（类似于鼠标悬停效果）。这可能不一定是显示/隐藏切换，而是任何类型的开关。并且可能由多个触发元素引起，我们需要跟踪元素的当前状态。

- njr101

如果页面上有多个元素可以导致状态更改，切换将无法正常工作。唯一确定的方法是查询当前状态并切换到相反的状态。很抱歉您认为这是不正确的并值得点踩。但每个人都有自己的观点。 - njr101