javascript - 显示和隐藏 div jQuery

Question

我有关于这个结构:

HTML:

<div class="container">
    <button class="a">Button</button>
    <div class="b" hidden="hidden">Content</div>
</div>
<div class="container">
    <button class="a">Button</button>
    <div class="b" hidden="hidden">Content</div>
</div>

jQuery:

$(document).ready(function () {
    $('.a').click(function () {
        if ($('.b').is(":visible")) {
            $('.b').hide();
        } else {
            $('.b').show();
        }
        return false;
    });
});

如何让它只显示我点击的div

JSFiddle .

Answer 1

使用下面的代码。检查DEMO

jquery next() .

Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

 $(document).ready(function () {
   $('.a').click(function (e) {
     e.preventDefault();
    // $('.b').hide();  if you want to hide opened div uncomment this line
     var bOBJ = $(this).next('.b');
    if (bOBJ.is(":visible")) {
        bOBJ.hide();
    } else {
        bOBJ.show();
    }
    //return false;
  });
});

第二个选项 DEMO

Jquery toggle()

Display or hide the matched elements.

 $(document).ready(function () {
   $('.a').click(function (e) {
     e.preventDefault();
     // $('.b').hide();  if you want to hide opened div uncomment this line  
    $(this).next('.b').toggle();
     //return false;
   });
 });