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

Question

我想知道如何仅切换“子”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>

非常感谢您的帮助。

Answer 1

尝试

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

或者

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

Answer 2

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

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

Answer 3

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

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

Answer 4

如果我想要切换的 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>