當我單擊 div 時如何隱藏/顯示兄弟姐妹 div

Question

我的網頁上有多個 div。 當我單擊名為singers-div 的父div 時，它假設僅在此div 中打開此<p>並在兄弟div中關閉<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 中，每個 the.singers 都在其自己的歌手分區中。

你需要 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>

---

為完整性編輯，您可以根據您的要求排除“當前”（很可能不會立即彈出和向下彈出 - 但可能是您希望它在第二次單擊時隱藏，因此保留一個帶有“當前”的變量" 段並根據需要將其排除）

 $(".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>