點擊時，只有一個孩子上課+使用此方法

Question

我想知道如何在jQuery / JavaScript中定義單擊事件，以排除具有特定類的孩子。 同時，我需要使用“ this”來訪問所單擊的元素。

 $(".slidebox-header *:not(.stop)").click(function(event) { alert("woohoo!"); $(this).siblings(".slidebox-content").slideToggle(); }); 

 .slidebox-header { background-color: yellow; } .stop { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="slidebox"> <div class="slidebox-header"> <div class="stop">BLOCKED AREA</div> <span>Header - Click allowed</span> </div> <div class="slidebox-content"> <p>Content</p> </div> </div> 

但是因為“ this”是指“ .slidebox-header”的子代，所以它不起作用。

我的問題：是否有解決此問題的優雅方法？

非常感謝！

Answer 1

slidebox-content是slidebox-header的同級，因此請使用.closest()遍歷到header，然后使用.sibling()

$(".slidebox-header *:not(.stop)").click(function(event) {
  $(this).closest('.slidebox-header').siblings(".slidebox-content").slideToggle();
});

您也可以使用后代選擇器來定位特定的孩子。

$(".slidebox-header > span").click(function(event) {
  $(this).closest('.slidebox-header').siblings(".slidebox-content").slideToggle();
});

 $(".slidebox-header *:not(.stop)").click(function(event) { //alert("woohoo!"); $(this).closest('.slidebox-header').siblings(".slidebox-content").slideToggle(); }); 

 .slidebox-header { background-color: yellow; } .stop { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="slidebox"> <div class="slidebox-header"> <div class="stop">BLOCKED AREA</div> <span>Header - Click allowed</span> </div> <div class="slidebox-content"> <p>Content</p> </div> </div> 

---

或者，您可以將事件與標頭綁定，然后將event.stopPropagation（）與block元素一起使用以停止事件冒泡。

$(".slidebox-header").click(function(event) {
  $(this).siblings(".slidebox-content").slideToggle();
});
$(".slidebox-header .stop").click(function(event) {
  event.stopPropagation();
});

 $(".slidebox-header").click(function(event) { $(this).siblings(".slidebox-content").slideToggle(); }); $(".slidebox-header .stop").click(function(event) { event.stopPropagation(); }); 

 .slidebox-header { background-color: yellow; } .stop { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="slidebox"> <div class="slidebox-header"> <div class="stop">BLOCKED AREA</div> <span>Header - Click allowed</span> </div> <div class="slidebox-content"> <p>Content</p> </div> </div> 

Answer 2

您可以使用parents()或closest()實現此目的。 以下是parents()的用法：

 $(".slidebox-header *:not(.stop)").click(function(event) { alert("woohoo!"); $(this).parents(".slidebox:first").find(".slidebox-content").slideToggle(); }); 

 .slidebox-header { background-color: yellow; } .stop { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="slidebox"> <div class="slidebox-header"> <div class="stop">BLOCKED AREA</div> <span>Header - Click allowed</span> </div> <div class="slidebox-content"> <p>Content</p> </div> </div>