当我点击 div 时如何隐藏/显示兄弟姐妹 div

Question

我的网页上有多个div。当我单击名为singers-div的父div时，它应该仅在此div中打开此<p>并关闭兄弟姐妹divs内部的<p>。但它不起作用。

注意：如果我尝试使用它，childern()会给我一个错误。mine.js:27 Uncaught TypeError: $(...).childern is not a function

.HTML

<section>
<div class="container">
<div class="row w-50 m-auto py-5">
<div class="col-md-12">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger one</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
<div class="col-md-12 ">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger two</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
<div class="col-md-12 ">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger three</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
<div class="col-md-12 ">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger four</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
</div>
</div>

</section>

.CSS

h1, h2, p {
margin: 0;
}
.singers
{
display: none;
}     
.singers-head
{
cursor: pointer;
}

jQuery

$(".singers-div").click(function(){
$(this).find('p').slideDown(1000);
$(this).find('.singers').siblings('p').slideUp(1000);
})

Answer 1

你可以这样做：

$(".singers-div").click(function() {
if ($(this).find('p').css("display") == "none") {
let singers = $(".singers").not(this);
singers.each(function() {
if ($(this).css("display") == "block") {
$(this).slideUp(1000);
}
});
$(this).find('p').slideDown(1000);
} else {
$(this).find('p').slideUp(1000);
}
})

h1, h2, p {
margin: 0;
}
.singers
{
display: none;
}
.singers-head
{
cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div class="container">
<div class="row w-50 m-auto py-5">
<div class="col-md-12">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger one</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
<div class="col-md-12 ">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger two</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
<div class="col-md-12 ">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger three</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
<div class="col-md-12 ">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger four</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
</div>
</div>
</section>

Answer 2

在这一行中：

$(this).find('.singers').siblings('p').slideUp(1000); 

.siblings 仅适用于具有相同父级的元素 - 不在同一"级别"(如果您愿意，可以称为表兄弟(。在你的 HTML 中，每个 .singers 都在它自己的 singers-div 中。

你需要去一个共同的父级，然后找到所有p.singers来隐藏它们：

$(this).closest(".container").find('p.singers')

$(".singers-div").click(function() {
$(this).closest(".container").find('p.singers').slideUp(1000);
$(this).find('p').slideDown(1000);
})

h1,
h2,
p {
margin: 0;
}
.singers {
display: none;
}
.singers-head {
cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div class="container">
<div class="row w-50 m-auto py-5">
<div class="col-md-12">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger one</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
<div class="col-md-12 ">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger two</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
<div class="col-md-12 ">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger three</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
<div class="col-md-12 ">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger four</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
</div>
</div>
</section>

---

编辑为了完整起见，您可以根据需要排除"当前"一个(很可能不会立即上下弹出 - 但可能是您希望它在第二次单击时隐藏，因此请保留一个带有"当前"段落的变量并根据需要排除它(

$(".singers-div").click(function() {
var current = $(this).find('p').slideDown(1000);
$(this).closest(".container").find('p.singers').not(current).slideUp(1000);
})

h1,
h2,
p {
margin: 0;
}
.singers {
display: none;
}
.singers-head {
cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div class="container">
<div class="row w-50 m-auto py-5">
<div class="col-md-12">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger one</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
<div class="col-md-12 ">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger two</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
<div class="col-md-12 ">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger three</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
<div class="col-md-12 ">
<div class="bg-dark singers-div">
<h2 class="bg-danger text-center singers-head">ٍSinger four</h2>
<p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
</div>
</div>
</div>
</div>
</section>