我有几个来自循环的链接，一旦我点击这些链接，每次都会显示一个 div。但是这里我需要在我点击链接以外的任何地方后隐藏 div。这是下面的代码。当我点击'click-1'，div会显示，当我再次点击'click-2'时，其他div会显示..等等 https://plnkr.co/edit/jv7uKHlryMnkJgK9wVM6?p=preview
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="maindiv" ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in data" >
<div ng-click="setActiveItem(x)" class="id">Click-{{x.id}}</div>
ssssssssssss
<div class="arrow_box name" ng-show="activeItem==x">
<h3>{{x.name}}</h3>
<p>Hello world</p>
<h3>{{x.name}}</h3>
<p>Hello world</p>
<h3>{{x.name}}</h3>
<p>Hello world</p>
</div>
</li>
</ul>
</div>
</body>
</html>
脚本.JS
var data = [{"name":"name1","title":"title1","id":"1"},{"name":"name2","title":"title2","id":"2"},{"name":"name3","title":"title3","id":"3"}];
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.data = data;
$scope.setActiveItem = function(item){
$scope.activeItem = item;
}
// show first on page load
// $scope.activeItem = data[0];
});// Code goes here
样式.CSS
ul li{
list-style-type:none;
cursor:pointer;
}
ul{
margin:0;
}
.maindiv{
position:relative;
}
.name{
position: absolute;
left: 97px;
background: #fff;
border: 1px solid;
width: 61px;
height: 202px;
overflow: auto;
width: 24%;
}
.arrow_box {
position: absolute;
background: #ffffff;
border: 1px solid #ccc;
}
.arrow_box:after, .arrow_box:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(0, 0, 0, 0);
border-right-color: #000000;
border-width: 5px;
margin-top: -5px;
}
.arrow_box:before {
border-color: rgba(0, 0, 0, 0);
border-right-color: #000000;
border-width: 8px;
margin-top: -8px;
}
.id,name{
float:left;
}
最佳答案
如果我没理解错的话，您可以尝试在打开“arrow_box”时显示一个叠加层，它会捕获点击事件以隐藏它并关闭“arrow_box”。
我已经更新了你的插件:https://plnkr.co/edit/CHk6atcGYLykpeXN7Z1g?p=preview
关键元素是那些:
叠加层:
<div class="overlay" ng-show="activeItem!=null" ng-click="setActiveItem(null)"></div>
对应的css:
.overlay{
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
background:rgba(0,0,0,.5);
z-index:1;
}
修改后的arrow_box css:
.arrow_box {
position: absolute;
background: #ffffff;
border: 1px solid #ccc;
z-index:10; <------ the modification
}
请注意，您的 ng-app 和 ng-controller 也移动了。
希望对你有帮助
关于html - 除了angularjs中的几个链接外，如何在其外部单击时隐藏div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55598297/