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

时间：2017-11-13 05:58:28

标签： javascript jquery html

我有以下代码段，我想隐藏具有相同类名的特定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>

4 个答案:

答案 0 :(得分：1)

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

＆＃13;
＆＃13; 
$(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();
  }
});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您可以按照以下方式执行相同的操作，而不是$(document).not(".actionLinks").on(...)，

$(':not(div.actionLinks)').click(function(){
    $('div.mainAction').hide();
});

答案 2 :(得分：0)

将click事件附加到正文以捕获每个click事件并检查它是否包含您的类。

document.body.addEventListener('click', (e) => {
    if(!e.target.classList.contains("mainAction")) {
        hideElem(openedMainActionElement);
    }
});

答案 3 :(得分：0)

通过链接到id并使用:target选择器，可以在没有javascript的情况下执行此操作。这样做的好处是在a标记和目标div

之间建立了语义链接 

.mainAction {
  display: none;
}

.mainAction:target {
  display: block;
}
<div id="actions1" class="mainAction">
  <h3>Actions 1</h3>
  <a href="#">Action 1</a>
  <a href="#">Action 2</a>
  <a href="#">Action 3</a>
</div>
<div class="actionLinks">
  <a href="#actions1">Link one</a>
</div>
<div id="actions2" class="mainAction">
  <h3>Actions 2</h3>
  <a href="#">Action 1</a>
  <a href="#">Action 2</a>
  <a href="#">Action 3</a>
</div>
<div class="actionLinks">
  <a href="#actions2">Link two</a>
</div>
<div id="actions3" class="mainAction">
  <h3>Actions 3</h3>
  <a href="#">Action 1</a>
  <a href="#">Action 2</a>
  <a href="#">Action 3</a>
</div>
<div class="actionLinks">
  <a href="#actions3">Link three</a>
</div>
<div id="actions4" class="mainAction">
  <h3>Actions 4</h3>
  <a href="#">Action 1</a>
  <a href="#">Action 2</a>
  <a href="#">Action 3</a>
</div>
<div class="actionLinks">
  <a href="#actions4">Link four</a>
</div>
<div id="actions5" class="mainAction">
  <h3>Actions 5</h3>
  <a href="#">Action 1</a>
  <a href="#">Action 2</a>
  <a href="#">Action 3</a>
</div>
<div class="actionLinks">
  <a href="#actions5">Link five</a>
</div>
<div id="actions6" class="mainAction">
  <h3>Actions 6</h3>
  <a href="#">Action 1</a>
  <a href="#">Action 2</a>
  <a href="#">Action 3</a>
</div>
<div class="actionLinks">
  <a href="#actions6">Link six</a>
</div>
<div id="actions7" class="mainAction">
  <h3>Actions 7</h3>
  <a href="#">Action 1</a>
  <a href="#">Action 2</a>
  <a href="#">Action 3</a>
</div>
<div class="actionLinks">
  <a href="#actions7">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>

相关问题
最新问题