隐藏身体上的元素点击

时间:2017-10-17 20:09:44

标签: javascript jquery



$(document).on('click','body', function(e){
      if(e.target == $('.moreOptionsMenu')){
        return false;
      }else{
        $('.moreOptionsMenu').remove();
      }
});

$(document).on('click','.fa.fa-bars.moreOptions', function(e){
e.stopPropagation();
  $('body').append('<div class="moreOptionsMenu">something</div>');
});
&#13;
.moreOptionsMenu{
  width: 50px;
  height: 50px;
  background: red;
}
.moreOptions{
  width: 50px;
  height: 50px;
  background: blue;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fa fa-bars moreOptions"></div>
&#13;
&#13;
&#13;

我在点击主体时删除了一些元素但是目标不在那个或其他元素上有一些问题:

$(document).on('click','body', function(e){
      if(e.target !== $('.moreOptionsMenu') && e.target !== $('.fa.fa-bars.moreOptions')){
        $('.moreOptionsMenu').remove();
      }
});

$(document).on('click','.fa.fa-bars.moreOptions', function(e){
  $('body').append('<div class="moreOptionsMenu">something</div>');
});

当我点击.fa.fa-bars.moreOptions时,我追加.moreOptionsMenu,当我点击其中的任何地方或.moreOptionsMenu时,我想删除.fa.fa-bars.moreOptions

使用上面的代码,每次都会删除它。

1 个答案:

答案 0 :(得分:2)

您是否尝试过使用e.stopPropagation()来阻止事件冒泡。例如:

$(document).on('click','.fa.fa-bars.moreOptions', function(e){
  e.stopPropagation();
  $('body').append('<div class="moreOptionsMenu">something</div>');
});