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()。

获取该组中每个元素的紧随其后的兄弟匹配的元素。如果提供了选择器，它将检索下一个选择器兄弟姐妹只有匹配那个选择器。

 $(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()

显示或隐藏匹配的元素。

 $(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;
   });
 });

Answer 2

查找最近的div.b使用jQuey.siblings()。而不是使用.show()和.hide()使用jQuery.toggle()

$(function() {
    $('.a').click(function() {
        $(this).siblings('.b').toggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

Answer 3

请检查

 $('.a').click(function () {
        
            $('.b').hide();
        $(this).siblings('.b').show();
       
        return false;
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<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>

Answer 4

    $(document).ready(function () {
    $('.a').click(function () {
        var parent =$(this).parent();
        var content =parent.find(".b").first();

        if ($(content).is(":visible")) {
            $(content).hide();
        } else {
            $(content).show();
        }
        return false;
    });
});

Answer 5

请使用以下代码

＆＃13;

$('.a').click(function(){
$(this).next('.b').slideToggle();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<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>

＆＃13;

Answer 6

这是一个快速简便的解决方案。请点击这里：sfiddle.net/webyourway/aahqh80q/9 /

使用名为'hidden'的html属性真的很少见。我从来没有在老实说之前使用它。我想罕见使用的主要原因是在语义上它应该用于隐藏元素而不管呈现方式。在你的情况下，似乎最好使用CSS display：none。

$(document).ready(function () {
    $('.a').click(function () {
        $('.b').hide();
        $(this).next('.b').show();
    });
});

Answer 7

您可以使用.toggle（）来显示和隐藏替代方案。尝试这个。

 $(document).ready(function () {
  $('.a').click(function () {
   $(this).next('.b').toggle(1000);
 });
});

显示和隐藏div jQuery

7 个答案: