Question

我有这种结构（它重复三次）

<div class="main">                   //  onlick toggle class sub
    <img>
    <div></div>
</div>

<div class="sub">                  
   <span>Toggle</span>               // onlick toggle class sub
</div>

现在我有了这个

$(document).ready(function(){ 
    $('.main').click(function(){
        $('.sub').slideToggle(2000);
    });
});

因为我有这三次，我的代码我必须用不同的类重复代码，因为只有sub应该是可见的。

我需要这样的东西

onlick THIS_ELEMENT toggle the next SUB class Element AND if a sub class is allready open close it and open this sub class

以及子类中的切换按钮，如下所示：

onlick THIS_ELEMENT close this SUB class element

你知道怎么做吗？

Answer 1

您要求我们选择（切换）当前元素的直接下一个兄弟元素。因此，在该上下文中，只需使用.next()来获取目标元素。

尝试，

$(document).ready(function(){ 
  $('.main').click(function(){
    $(this).next('.sub').slideToggle(2000);
  }); 
});

DEMO

Answer 2

事件处理程序'this引用触发事件的元素。（请注意，使用jQuery或类似框架时，这是仅）。

所以在你的例子中使用：

$(this).next('.sub').slide(...)

在您的事件处理程序中。

使用jquery查找特定元素以切换

2 个答案:

DEMO