Question

我有一个包含点击动作的js变量。这个动作绑定了几个不同的div：

<div class="clickable"><div class="hidden">inner content 1</div></div>

<div class="clickable"><div class="hidden">inner content 2</div></div>

<div class="clickable"><div class="hidden">inner content 3</div></div>

js看起来像这样：

$(document).ready(function(){

var clicker = function(){

    $('.hidden').slideUp();

    $(this).children('.hidden').slideDown();

    $(this).unbind('click',clicker);
}


$('.clickable').bind('click',clicker);


});

以上代码基本上有效。如果我点击div.clickable它会显示隐藏的内容。如果我点击另一个div.clickable，它会隐藏我刚才看到的内容并显示另一个内容。然而问题是，由于“clicker”内部的解除绑定功能，我点击它会失去其clicker功能。我之所以这样做是因为隐藏的内容具有可点击的内容，现在我在隐藏内容中点击的任何内容都会再次触发“点击者”。

如果不使用手风琴插件，更明智的做法是什么？

如何查看div是否已绑定到某个函数，如果没有，重新绑定它或某种类型的东西？我正在寻找的是将div.clickable重新绑定到'clicker'一旦关闭，即另一个div.clickable .hidden正在被查看。

Answer 1

您可以在.slideUp()中排除您点击的那个，如下所示：

$(document).ready(function(){
  $('.clickable').click(function(){
    $('.hidden').not($(this).children()).slideUp();
    $(this).children('.hidden:hidden').slideDown();
  });
});

通过使用.not()，我们将.hidden中的当前元素排除在隐藏状态，并且在显示将其限制为:hidden元素的儿童时，意味着我们不会重新滑动任何已经可见的。

另一种更清楚地重写它的方法是：

$(function(){
  $('.clickable').click(function(){
    $('.clickable').not(this).children('.hidden').slideUp();
    $(this).children('.hidden:hidden').slideDown();
  });
});

或者，如果所有.clickable个元素都是兄弟姐妹：

$(function(){
  $('.clickable').click(function(){
    $(this).children('.hidden:hidden').slideDown()
     .end().siblings('.clickable').children('.hidden').slideUp();
  });
});

Answer 2

$(document).ready(function(){

var clicker = function(){

    $('.clickable').bind('click',clicker);

    $('.hidden').slideUp();

    $(this).children('.hidden').slideDown();

    $(this).unbind('click',clicker);
}


$('.clickable').bind('click',clicker);


});

用jquery制作我自己的手风琴风格切换

2 个答案: