[英]how to hide/show siblings div when i click on div
I have multiple divs on my webpage.我的网页上有多个 div。 When i click on parent div called singers-div it suppose to open this
<p>
only in this div and close <p>
inside siblings div
s.当我单击名为singers-div 的父div 时,它假设仅在此div 中打开此
<p>
并在兄弟div
中关闭<p>
。 But it doesn't work.但它不起作用。
note: childern()
gives me an error if i try to use it.注意:如果我尝试使用
childern()
,它会给我一个错误。 mine.js:27 Uncaught TypeError: $(...).childern is not a function
HTML 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 CSS
h1, h2, p {
margin: 0;
}
.singers
{
display: none;
}
.singers-head
{
cursor: pointer;
}
jQuery jQuery
$(".singers-div").click(function(){
$(this).find('p').slideDown(1000);
$(this).find('.singers').siblings('p').slideUp(1000);
})
You could do it like this:你可以这样做:
$(".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>
In this line:在这一行:
$(this).find('.singers').siblings('p').slideUp(1000);
.siblings only applies to elements that have the same parent - not at the same "level" (cousins if you like). .siblings 仅适用于具有相同父级的元素 - 不在同一“级别”(如果您愿意,可以是表亲)。 In your HTML each of the.singers is in its own singers-div.
在您的 HTML 中,每个 the.singers 都在其自己的歌手分区中。
You need to go up to a common parent then find all the p.singers
to hide them:你需要 go 到一个共同的父母,然后找到所有的
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>
EDIT for completeness, you can exclude the "current" one depending on your requirements (most likely not having it pop up and down immediately - but it may be that you want it to hide on 2nd click, so keep a variable with the "current" paragraph and exclude it as required)为完整性编辑,您可以根据您的要求排除“当前”(很可能不会立即弹出和向下弹出 - 但可能是您希望它在第二次单击时隐藏,因此保留一个带有“当前”的变量" 段并根据需要将其排除)
$(".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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.