javascript - 在多个div中具有相同类的元素之外单击时如何隐藏特定的div

我有以下代码片段，我想隐藏具有相同类名的特定div。我有多个具有相同类名的div，需要在actionLinks类之外触发事件。但是我有点困惑该怎么做。你可以指导我吗？

$(document).on("click", ".actionLinks", function() {
  $('.mainAction').hide();
  $(this).prev('.mainAction').show();
});

$(document).not(".actionLinks").on("click", function() {
  $('.mainAction').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="mainAction" style="display: none;">
  <a href="#">Action 1</a>
  <a href="#">Action 2</a>
  <a href="#">Action 3</a>
</div>
<div class="actionLinks">
  <a href="#">Link one</a>
</div>
<div class="mainAction" style="display: none;">
  <a href="#">Action 1</a>
  <a href="#">Action 2</a>
  <a href="#">Action 3</a>
</div>
<div class="actionLinks">
  <a href="#">Link two</a>
</div>
<div class="mainAction" style="display: none;">
  <a href="#">Action 1</a>
  <a href="#">Action 2</a>
  <a href="#">Action 3</a>
</div>
<div class="actionLinks">
  <a href="#">Link three</a>
</div>
<div class="mainAction" style="display: none;">
  <a href="#">Action 1</a>
  <a href="#">Action 2</a>
  <a href="#">Action 3</a>
</div>
<div class="actionLinks">
  <a href="#">Link four</a>
</div>
<div class="mainAction" style="display: none;">
  <a href="#">Action 1</a>
  <a href="#">Action 2</a>
  <a href="#">Action 3</a>
</div>
<div class="actionLinks">
  <a href="#">Link five</a>
</div>
<div class="mainAction" style="display: none;">
  <a href="#">Action 1</a>
  <a href="#">Action 2</a>
  <a href="#">Action 3</a>
</div>
<div class="actionLinks">
  <a href="#">Link six</a>
</div>
<div class="mainAction" style="display: none;">
  <a href="#">Action 1</a>
  <a href="#">Action 2</a>
  <a href="#">Action 3</a>
</div>
<div class="actionLinks">
  <a href="#">Link seven</a>
</div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

最佳答案

您可以尝试event.target。检查以下代码段

$(document).on("click", "body", function(event) {
  if (!$('.actionLinks a').is(event.target) && $('.actionLinks a').has(event.target).length === 0) {
    $('.mainAction').hide();
    $(event.target).show().closest('.mainAction').show();
  } else {
    $('.mainAction').hide();
    $(event.target).closest('.actionLinks').prev('.mainAction').show();
  }
});

body {
  font: 13px Verdana;
}

.mainAction {
  display: none;
  background: red;
  color: #fff;
  margin-bottom: 5px;
}

.mainAction a {
  color: #fff;
  padding: 5px;
  display: inline-block;
}

.actionLinks a {
  background: blue;
  color: #fff;
  margin-bottom: 5px;
  display: inline-block;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="mainAction">
  <a href="#">Action 1</a>
  <a href="#">Action 2</a>
  <a href="#">Action 3</a>
</div>
<div class="actionLinks">
  <a href="#">Link one</a>
</div>
<div class="mainAction">
  <a href="#">Action 1</a>
  <a href="#">Action 2</a>
  <a href="#">Action 3</a>
</div>
<div class="actionLinks">
  <a href="#">Link two</a>
</div>
<div class="mainAction">
  <a href="#">Action 1</a>
  <a href="#">Action 2</a>
  <a href="#">Action 3</a>
</div>
<div class="actionLinks">
  <a href="#">Link three</a>
</div>
<div class="mainAction">
  <a href="#">Action 1</a>
  <a href="#">Action 2</a>
  <a href="#">Action 3</a>
</div>
<div class="actionLinks">
  <a href="#">Link four</a>
</div>
<div class="mainAction">
  <a href="#">Action 1</a>
  <a href="#">Action 2</a>
  <a href="#">Action 3</a>
</div>
<div class="actionLinks">
  <a href="#">Link five</a>
</div>
<div class="mainAction">
  <a href="#">Action 1</a>
  <a href="#">Action 2</a>
  <a href="#">Action 3</a>
</div>
<div class="actionLinks">
  <a href="#">Link six</a>
</div>
<div class="mainAction">
  <a href="#">Action 1</a>
  <a href="#">Action 2</a>
  <a href="#">Action 3</a>
</div>
<div class="actionLinks">
  <a href="#">Link seven</a>
</div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>