显示和隐藏div jQuery [英] Show and hide div jQuery

问题描述

我有这种结构：

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

How to make that shows only the div on which I clicked

JSFiddle 。

推荐答案

使用下面的代码。检查 DEMO

use below code . check 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;
   });
 });

这篇关于显示和隐藏div jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！