Question

我想知道如何在jQuery / JavaScript中定义一个click事件，它排除了具有特定类的孩子。同时我需要使用＆＃34;这个＆＃34;访问点击的元素。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

但因为＆＃34;这个＆＃34;指的是＆＃34; .slidebox-header＆＃34;的孩子，它不起作用。

我的问题：有没有一种优雅的方法来解决这个问题？

非常感谢！

Answer 1

slidebox-content是slidebox-header的兄弟，所以请使用.closest()遍历标题，然后使用.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();
});

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

或者您可以将事件与标头绑定，并使用event.stopPropagation()和block元素来停止事件冒泡。

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

单击除了一个具有类+使用它的子项

2 个答案: