如何仅切换 *next* .class 或 div（而不是其余部分）答案

【问题标题】：How to toggle only the *next* .class or div (not the rest)如何仅切换 *next* .class 或 div（而不是其余部分）
【发布时间】：2010-10-29 00:29:41
【问题描述】：

我想知道如何仅切换“子”div，单击在 html 上重复的按钮，如下所示：

<div class="button">
     <div class="hide toggle">
          Blah1
     </div>
</div>
<div class="button">
     <div class="hide toggle">
          Blah2
     </div>
</div>
<div class="button">
     <div class="hide toggle">
          Blah3
     </div>
</div>

目标是只影响中间子 div，并隐藏其余部分。

不知道有没有可能。

这段代码让我切换了所有的 div：

<script type="text/javascript">
  $(document).ready(function(){

    $('.button').click(function() {
    $('.toggle').slideToggle();
    }, function () {
        $('.toggle').slideToggle();
    });

  });
</script>

非常感谢您的帮助。

【问题讨论】：

标签： jquery togglebutton

【解决方案1】：

如果我要切换的 DIV 不是点击元素的子元素，我必须做什么，例如：

<span onclick="$(this).next('.showme').slideToggle();">Klick to show first Showme-Class</span>
<div class="showme">You've clicked the first span-element</div>

<span onclick="$(this).next('.showme').slideToggle();">Klick to show second Showme-Class</span>
<div class="showme">You've clicked the second span-element</div>

<span onclick="$(this).next('.showme').slideToggle();">Klick to show third Showme-Class</span>
<div class="showme">You've clicked the third span-element</div>

【讨论】：

嗯 .. 问题还是答案？如果是前者，请发帖... question :-)

【解决方案2】：

Thomas Stock 和 Russ Cam 说得对……我只是把它包好。将此粘贴到您页面的某个位置...通常在您的所有代码之后的头部或页脚中。

<script type="text/javascript">
    $(document).ready(function(){ 
        $(".button").click(function() {
    $(this).next('.toggle').slideToggle();
    });
    });
</script>

【讨论】：

【解决方案3】：

试试

$(this).next('.toggle').slideToggle();

或

$(this).children('.toggle:first').slideToggle();

【讨论】：

【解决方案4】：

在点击事件处理程序中，this 关键字指的是被点击的元素。将您的 $('.toggle').slideToggle() 行替换为

$('.toggle',this).slideToggle();

【讨论】：