Question

有一个按钮和一个下拉菜单，请告诉我，单击它不会隐藏的菜单区域后，单击该菜单区域后它将隐藏，该怎么办？现在，它通过单击打开，并通过单击按钮和菜单区域关闭。

$(function(){

$('.click').click(function() {
    $('.click-menu').slideToggle(200);
  });

  });

.click {
	width: 100px;
	height: 100px;
	background-color: red;
	text-align: center;
	border-radius: 50%;
	position: relative;
	cursor: pointer;
}

.click span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.click-menu {
	display: none;
	position: absolute;
	top: 110px;
	left: 50px;

}

.click-menu div {
	width:300px;
	text-align: center;
	background-color: green;
	margin-top: 10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="main.css">
</head>
<body>
		<div class="click">
			<span>CLICK</span>
			<div class="click-menu">
				<div>1</div>
				<div>2</div>
				<div>3</div>
				<div>4</div>
				<div>5</div>
			</div>
		</div>
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="main.js"></script>	
</body>
</html>

Answer 1

这可能不是最好的方法，但它可行：

$(function(){

  $('.click').click(function() {
    $('.click-menu').slideToggle(200);
  });
  
  $('html').click( function(e) {
    if( $(e.target).closest('.click').length===0 && $(e.target).closest(".click-menu").length===0) {
      $('.click-menu').slideUp(200);
    }
  });

});

.click {
	width: 100px;
	height: 100px;
	background-color: red;
	text-align: center;
	border-radius: 50%;
	position: relative;
	cursor: pointer;
}

.click span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.click-menu {
	display: none;
	position: absolute;
	top: 110px;
	left: 50px;

}

.click-menu div {
	width:300px;
	text-align: center;
	background-color: green;
	margin-top: 10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="click">
	<span>CLICK</span>
    </div>
    <div class="click-menu">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
	  
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="main.js"></script>	
</body>
</html>

Answer 2

您需要在跨度而不是父级上调用事件。为跨度设置样式。然后，单击html上的单击，以检测是否有一个名为“ click”的父级。如果没有，请关闭菜单。

$(function(){

$('.click span').click(function() {
    $('.click-menu').slideToggle(200);
  });

$("html").click(function(e){
   if ( $(e.target).parents(".click").length ) {
		e.stopPropagation();
	} else {
		$('.click-menu').slideToggle(200);
	}
});

  });

.click {
	width: 100px;
	height: 100px;
	background-color: red;
	text-align: center;
	border-radius: 50%;
	position: relative;
	cursor: pointer;
}

.click span {
	position: absolute;
    height: 100%;
    width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.click-menu {
	display: none;
	position: absolute;
	top: 110px;
	left: 50px;

}

.click-menu div {
	width:300px;
	text-align: center;
	background-color: green;
	margin-top: 10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="main.css">
</head>
<body>
		<div class="click">
			<span>CLICK</span>
			<div class="click-menu">
				<div>1</div>
				<div>2</div>
				<div>3</div>
				<div>4</div>
				<div>5</div>
			</div>
		</div>
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="main.js"></script>	
</body>
</html>

通过单击区域隐藏菜单

2 个答案: