Jquery 仅显示子div，隐藏所有其他div

我对jQuery有点陌生，但我有以下几点：

<div class="team-member">
   <p>John Doe</p>
   <div class="team-member-text"Lorem Ipsum</div>
</div>
...several others...
   <div class="team-member">
   <p>Jane Doe</p>
   <div class="team-member-text"Lorem Ipsum</div>
</div>

再次单击时，它将隐藏，然后重新显示

---

我发现了类似的问题，但它们似乎并不完全相同

问题在于

此

不是

团队成员文本

元素，而是

团队成员

元素

jQuery(function($) {

    $( ".team-member" ).on('click', function() {

        var thisOne = $(this).find(".team-member-text");

        $('.team-member-text').not(thisOne).hide();

        thisOne.show( "slow", function() {  });

    });
});

---

问题在于

此

不是

团队成员文本

元素，而是

团队成员

元素

jQuery(function($) {

    $( ".team-member" ).on('click', function() {

        var thisOne = $(this).find(".team-member-text");

        $('.team-member-text').not(thisOne).hide();

        thisOne.show( "slow", function() {  });

    });
});

---

你也可以这样写

$(document).ready(function(){
     $(".team-member").click(function() {
         $("div.team-member-text").not($(this).find("div.team-member-text")).hide();
         $(this).find("div.team-member-text").show();
         //or
         $(this).siblings("div.team-member").find("div.team-member-text")).hide();    
     });
});

给你一点解释

---

单击

团队成员

div，我将检查所有

团队成员文本

div，但该文本不是当前成员的子项并将其隐藏

接下来，我将展示当前的孩子

---

另一种方法是检查所有同级div

团队成员

，并找到他们的孩子以隐藏他们。

您也可以这样编写

$(document).ready(function(){
     $(".team-member").click(function() {
         $("div.team-member-text").not($(this).find("div.team-member-text")).hide();
         $(this).find("div.team-member-text").show();
         //or
         $(this).siblings("div.team-member").find("div.team-member-text")).hide();    
     });
});

给你一点解释

---

单击

团队成员

div，我将检查所有

团队成员文本

div，但该文本不是当前成员的子项并将其隐藏

接下来，我将展示当前的孩子

---

另一种方法是检查所有同级div

团队成员

，并找到他们的孩子来隐藏他们。

啊，好的，这很有意义。这对最后一行进行了一次更改（将show更改为toggle）：thisOne.toggle（“slow”，function（）{}）；这样第二次点击就会关闭它。啊，好的，这是有道理的。这对最后一行进行了一次更改（将show更改为toggle）：thisOne.toggle（“slow”，function（）{}）；这样第二次点击就会关闭它。