Question

以下是我的代码

formControlName

$(document).ready(function() {
	
  var open 			= $('.openButton'),
  		container = $('.container'),
      close			= $('.closeButton');
  
  	container.hide();
    
  	function init() {
    	eventInit();
    }
    
    function eventInit() {
    	$(document).on('click', openBox);
			$(document).on('keyup', function(e) {
      	container.hide();
      });
    }
    
    function openBox(event) {
    	if(event.target === open[0] || $(event.target).closest(container).length) {
      	container.show();
      } else if(event.target === close[0]) {
      	container.hide();
      } else {
      	container.hide();
      }
    }
    
    init();
});

.container {
  width:400px;
  height:400px;
  background-color:red;
  position:relative;
  //display:none;
}

.closeButton {
  position:absolute;
  top:0;
  right:0;
  height:50px;
  width:50px;
  background-color:black;
}

这里，什么不起作用，是当我点击关闭div时，容器没有关闭。我很困惑，为什么它不起作用。有人可以帮我解决这个问题以及为什么它不能用于我的代码。

由于

杰夫

Answer 1

问题在于“|| $（event.target）.closest（container）.length” - 单击关闭按钮时会出现这种情况。所以，不是去其他if和else部分，即使是点击按钮也是如此，它会尝试显示容器。请参阅更新的代码段。

$(document).ready(function() {
	
  var open 			= $('.openButton'),
  		container = $('.container'),
      close			= $('.closeButton');
  
  	container.hide();
    
  	function init() {
    	eventInit();
    }
    
    function eventInit() {
    	$(document).on('click', openBox);
			$(document).on('keyup', function(e) {
      	container.hide();
      });
    }
    
    function openBox(event) {
    	if(event.target === open[0]) {
      	container.show();
      } else if(event.target === close[0]) {
      	container.hide();
      }
    }
    
    init();
});

.container {
  width:400px;
  height:400px;
  background-color:red;
  position:relative;
  //display:none;
}

.closeButton {
  position:absolute;
  top:0;
  right:0;
  height:50px;
  width:50px;
  background-color:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">
  <form action="post">
    <input type="text" class="openButton">
  </form>
</div>

<div class="container">
  <div class="closeButton"></div>
</div>

Answer 2

关闭按钮位于容器div内部，因此else if将是真实的，而第二个if不符合。因此，通过更新$(document).ready(function() { var open = $('.openButton'), container = $('.container'), close = $('.closeButton'); container.hide(); function init() { eventInit(); } function eventInit() { $(document).on('click', openBox); $(document).on('keyup', function(e) { container.hide(); }); } function openBox(event) { if (event.target === close[0]) { container.hide(); } else if (event.target === open[0] || $(event.target).closest(container).length) { container.show(); } else { container.hide(); } } init(); });语句的顺序，为close div赋予更高的优先级。

.container {
  width: 400px;
  height: 400px;
  background-color: red;
  position: relative;
  //display:none;
}

.closeButton {
  position: absolute;
  top: 0;
  right: 0;
  height: 50px;
  width: 50px;
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">
  <form action="post">
    <input type="text" class="openButton">
  </form>
</div>

<div class="container">
  <div class="closeButton"></div>
</div>

{{1}}

event.target jquery让我困惑

2 个答案: