半秒后使用 AngularJS 在鼠标悬停时显示子菜单
Show submenu on mouseover using AngularJS after half a second
我正在尝试使用 AngularJS 创建导航栏。
我需要在 'div.menu-links'.
上分别在 mouseover 和 mouseleave 上显示和隐藏子菜单 'div.farm-links'
我应该将 'menu-links' 上的鼠标悬停延迟 0.5 秒,类似地在 mouseleave 上,效果应该在 0.5 秒后发生。但不知何故,这似乎行不通。
你能帮我纠正一下吗?
另外,是否可以仅使用 CSS 来实现?
angular.module('topNavApp', ['ngAnimate']).controller('navCtrl', ['$scope', '$timeout', function($scope, $timeout){
$scope.pageData = {
"allChildList":[
{
"pageExist":true,
"pageTitle":"About Abc",
"pagePath":"http://www.yahoo.com",
"openNewTab":true,
"hideInTabletNav":true,
"hideInMobileNav":true,
"secondLevelChildList":[
{
"pageExist":true,
"pageTitle":"News",
"pagePath":"/content/myloc/about-Abc/news.html",
"openNewTab":false,
"thirdLevelChildList":[
],
"multiple":true,
"thirdLevelPageExist":true
},
{
"pageExist":true,
"pageTitle":"Company",
"pagePath":"/content/myloc/about-Abc/company.html",
"openNewTab":false,
"thirdLevelChildList":[
{
"pageExist":true,
"pageTitle":"Strategy",
"pagePath":"/content/myloc/about-Abc/company/strategy.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Mission Vision Values",
"pagePath":"/content/myloc/about-Abc/company/missionvisionvalues.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Leadership",
"pagePath":"/content/myloc/about-Abc/company/leadership.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Org Chart",
"pagePath":"http://mysite/pages/OrgChart.aspx",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Corporate Responsibility",
"pagePath":"http://myloc2/who/global-impact",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"History",
"pagePath":"https://usa.Abc.com/about-Abc/our_business/history-of-Abc.html",
"openNewTab":true
},
{
"pageExist":true,
"pageTitle":"Products",
"pagePath":"http://myloc2/who/products",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Investor Info",
"pagePath":"http://investor.Abc.com/",
"openNewTab":true
},
{
"pageExist":true,
"pageTitle":"View All",
"pagePath":"/content/myloc/about-Abc/company/view-more.html",
"openNewTab":false
}
],
"multiple":true,
"thirdLevelPageExist":true
},
{
"pageExist":true,
"pageTitle":"Community",
"pagePath":"/content/myloc/about-Abc/community.html",
"openNewTab":false,
"thirdLevelChildList":[
{
"pageExist":true,
"pageTitle":"Diversity + Inclusion",
"pagePath":"/content/myloc/about-Abc/community/diversity-and-inclusion.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Giving Back",
"pagePath":"http://myloc2/working/giving-back/Pages/default.aspx",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Ideas Community",
"pagePath":"/content/myloc/about-Abc/initiatives/ideas.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Other Communities",
"pagePath":"http://myloc2/working/get-involved/Pages/default.aspx",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"View All",
"pagePath":"/content/myloc/about-Abc/community/view-all-community.html",
"openNewTab":false,
"hideInDesktopNav":true
},
{
"pageExist":true,
"pageTitle":"myloc Transformation",
"pagePath":"/content/myloc/about-Abc/community/transformation.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Calendar",
"pagePath":"/content/myloc/about-Abc/community/Calendar.html",
"openNewTab":false
}
],
"multiple":true,
"thirdLevelPageExist":true
},
],
"columnClass":"0",
"multiple":true,
"secondLevelPageExist":true
},
{
"pageExist":true,
"pageTitle":"Offices",
"pagePath":"http://www.yahoo.com",
"openNewTab":true,
"hideInDesktopNav":true,
"hideInTabletNav":true,
"hideInMobileNav":true,
"secondLevelChildList":[
{
"pageExist":true,
"pageTitle":"Locations",
"pagePath":"/content/myloc/offices/locations.html",
"openNewTab":false,
"thirdLevelChildList":[
{
"pageExist":true,
"pageTitle":"Ashburn",
"pagePath":"/content/myloc/offices/locations/ashburn.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Austin",
"pagePath":"/content/myloc/offices/locations/austin.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Bangalore",
"pagePath":"/content/myloc/offices/locations/bangalore.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Denver",
"pagePath":"/content/myloc/offices/locations/denver.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Dubai",
"pagePath":"/content/myloc/offices/locations/dubai.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Foster City",
"pagePath":"/content/myloc/offices/locations/foster-city.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"San Francisco",
"pagePath":"/content/myloc/offices/locations/san-francisco.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Miami",
"pagePath":"/content/myloc/offices/locations/miami.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Singapore - Singpost",
"pagePath":"/content/myloc/offices/locations/singapore-singpost.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Singapore - Robinson Road",
"pagePath":"/content/myloc/offices/locations/singapore-robinson-road.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"View All",
"pagePath":"http://myloc.trusted.Abc.com/content/myloc/offices/locations.html",
"openNewTab":true
}
],
"multiple":true,
"thirdLevelPageExist":true
},
{
"pageExist":true,
"pageTitle":"Quick Links",
"pagePath":"/content/myloc/offices/quick-links.html",
"openNewTab":true,
"hideInDesktopNav":true,
"hideInMobileNav":true,
"thirdLevelChildList":[
{
"pageExist":true,
"pageTitle":"Copy Centers",
"pagePath":"/content/myloc/offices/quick-links/copy-centers.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Floor Maps",
"pagePath":"/content/myloc/offices/quick-links/floor-maps.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Food Services",
"pagePath":"/content/myloc/offices/quick-links/food-services.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"View All",
"pagePath":"/content/myloc/offices/quick-links/view-all.html",
"openNewTab":false
}
],
"multiple":true,
"thirdLevelPageExist":true
},
{
"pageExist":true,
"pageTitle":"Facilities Help",
"pagePath":"/content/myloc/offices/facilities-help.html",
"openNewTab":false,
"thirdLevelChildList":[
{
"pageExist":true,
"pageTitle":"Submit Request",
"pagePath":"http://servicerequest",
"openNewTab":true
},
{
"pageExist":true,
"pageTitle":"View All",
"pagePath":"/content/myloc/offices/facilities-help/view-all-facilities-help.html",
"openNewTab":false,
"hideInDesktopNav":true
}
],
"multiple":true,
"thirdLevelPageExist":true
},
{
"pageExist":true,
"pageTitle":"View All",
"pagePath":"/content/myloc/offices/view-all-offices.html",
"openNewTab":false,
"hideInDesktopNav":true,
"thirdLevelChildList":[
],
"thirdLevelPageExist":false
}
],
"columnClass":"3",
"multiple":true,
"secondLevelPageExist":true
},
{
"pageExist":true,
"pageTitle":"Functions",
"pagePath":"https://www.google.com",
"openNewTab":true,
"hideInDesktopNav":true,
"hideInTabletNav":true,
"hideInMobileNav":true,
"secondLevelChildList":[
],
"columnClass":"1",
"multiple":true,
"secondLevelPageExist":true
},
{
"pageExist":true,
"pageTitle":"My HR",
"pagePath":"/content/myloc/my-hr.html",
"openNewTab":false,
"secondLevelChildList":[
],
"columnClass":"1",
"multiple":true,
"secondLevelPageExist":true
},
{
"pageExist":true,
"pageTitle":"Tools",
"pagePath":"/content/myloc/tools.html",
"openNewTab":true,
"secondLevelChildList":[
],
"columnClass":"1",
"multiple":true,
"secondLevelPageExist":true
}
]
};
$scope.showDiv = function(){
$timeout(function(){
this.hovering = true;
}, 500);
};
$scope.hideDiv = function(){
$timeout(function(){
this.hovering = false;
}, 500);
};
}]);
.hiding-div{
display: inline-block;
padding: 10px;
margin: 10px;
}
.menu-link{
text-decoration: none;
}
.menu-link:hover{
color: #AB09AF;
}
.farm-links{
position: absolute;
top: 50px;
height: 400px;
width: 700px;
border: 1px solid lightgrey;
padding: 5px;
display: flex;
word-wrap: flex;
column-count: 4;
}
.groups-links{
display: inline-block;
margin-right: 60px;
}
.group-title{
color: grey;
text-decoration: none;
}
.group-links{
list-style: none;
}
.second-link{
margin-left: -40px;
}
.second-link > a{
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<nav ng-app="topNavApp" ng-controller="navCtrl" class="nav">
<div class="nav-center">
<!--<li ng-repeat="obj in pageData.allChildList" ng-model="parentNav" ng-mouseover="parentNav=true" ng-mouseleave="parentNav=false"> -->
<div ng-repeat="obj in pageData.allChildList" class="hiding-div" ng-mouseover="showDiv()" ng-mouseleave="hideDiv()" >
<div>
<a ng-href="{{obj.pagePath}}" class="main-link multiple menu-link">{{obj.pageTitle}}</a>
<!--<span class="main-link mobile" aria-labelledby="{{obj.pageTitle}}" aria-expanded="false">{{obj.pageTitle}}</span>-->
<!--<span ng-repeat="child in obj.secondLevelVoList" class="childNav" ng-show="parentNav">-->
<div class="farm-links" ng-show="hovering">
<!--<a class="prev-link" aria-labelledby="{{obj.pagetitle}}">{{obj.pageTitle}}</a>-->
<div ng-repeat="child in obj.secondLevelChildList" class="groups-links">
<a ng-href="{{child.pagePath}}" class="group-title">{{child.pageTitle}}</a>
<!--<span class="group-title mobile" aria-expanded="false">{{child.pageTitle}}</span>-->
<ul ng-repeat="subchild in child.thirdLevelChildList" class="group-links">
<li class="second-link">
<a ng-href="{{subchild.pagePath}}">{{subchild.pageTitle}}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
不可能通过纯 CSS 来实现。问题出在您的 this.hovering
变量中,在您的情况下,它应该是 $scope.hovering
。
$scope.showDiv = function() {
$timeout(function() {
$scope.hovering = true;
}, 500);
};
$scope.hideDiv = function() {
$timeout(function() {
$scope.hovering = false;
}, 500);
};
更新
'$scope.hovering' shows all the submenus instead of showing up only the corresponding submenu. How do we fix that?
只需更新以下行:
HTML:
<div ng-repeat="obj in pageData.allChildList" class="hiding-div" ng-mouseover="showDiv(obj)" ng-mouseleave="hideDiv(obj)">
...
<div class="farm-links" ng-show="obj.hovering">
控制器:
$scope.showDiv = function(obj) {
$timeout(function() {
obj.hovering = true;
}, 500);
};
$scope.hideDiv = function(obj) {
$timeout(function() {
obj.hovering = false;
}, 500);
};
这里我们将当前 obj
从 ng-repeat
传递给 $scope.showDiv
和 $scope.showDiv
函数,然后我们设置一个新对象 属性,如下所示: obj.hovering = true;
或 obj.hovering = false;
。在这里 ng-show="obj.hovering"
我们是 showing/hiding 这个基于新 obj.hovering
属性 值的元素。
您必须在 $scope
上定义悬停。您可以使用数组来显示 ng-repeat
上的相应行
JS:
$scope.hovering=[];
$scope.showDiv = function(index) {
$timeout(function() {
$scope.hovering[index] = true;
}, 500);
};
$scope.hideDiv = function(index) {
$timeout(function() {
$scope.hovering[index] = false;
}, 500);
};
HTML:
<div ng-repeat="obj in pageData.allChildList" class="hiding-div" ng-mouseover="showDiv($index)" ng-mouseleave="hideDiv($index)" >
<div>
我正在尝试使用 AngularJS 创建导航栏。 我需要在 'div.menu-links'.
上分别在 mouseover 和 mouseleave 上显示和隐藏子菜单 'div.farm-links'我应该将 'menu-links' 上的鼠标悬停延迟 0.5 秒,类似地在 mouseleave 上,效果应该在 0.5 秒后发生。但不知何故,这似乎行不通。
你能帮我纠正一下吗? 另外,是否可以仅使用 CSS 来实现?
angular.module('topNavApp', ['ngAnimate']).controller('navCtrl', ['$scope', '$timeout', function($scope, $timeout){
$scope.pageData = {
"allChildList":[
{
"pageExist":true,
"pageTitle":"About Abc",
"pagePath":"http://www.yahoo.com",
"openNewTab":true,
"hideInTabletNav":true,
"hideInMobileNav":true,
"secondLevelChildList":[
{
"pageExist":true,
"pageTitle":"News",
"pagePath":"/content/myloc/about-Abc/news.html",
"openNewTab":false,
"thirdLevelChildList":[
],
"multiple":true,
"thirdLevelPageExist":true
},
{
"pageExist":true,
"pageTitle":"Company",
"pagePath":"/content/myloc/about-Abc/company.html",
"openNewTab":false,
"thirdLevelChildList":[
{
"pageExist":true,
"pageTitle":"Strategy",
"pagePath":"/content/myloc/about-Abc/company/strategy.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Mission Vision Values",
"pagePath":"/content/myloc/about-Abc/company/missionvisionvalues.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Leadership",
"pagePath":"/content/myloc/about-Abc/company/leadership.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Org Chart",
"pagePath":"http://mysite/pages/OrgChart.aspx",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Corporate Responsibility",
"pagePath":"http://myloc2/who/global-impact",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"History",
"pagePath":"https://usa.Abc.com/about-Abc/our_business/history-of-Abc.html",
"openNewTab":true
},
{
"pageExist":true,
"pageTitle":"Products",
"pagePath":"http://myloc2/who/products",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Investor Info",
"pagePath":"http://investor.Abc.com/",
"openNewTab":true
},
{
"pageExist":true,
"pageTitle":"View All",
"pagePath":"/content/myloc/about-Abc/company/view-more.html",
"openNewTab":false
}
],
"multiple":true,
"thirdLevelPageExist":true
},
{
"pageExist":true,
"pageTitle":"Community",
"pagePath":"/content/myloc/about-Abc/community.html",
"openNewTab":false,
"thirdLevelChildList":[
{
"pageExist":true,
"pageTitle":"Diversity + Inclusion",
"pagePath":"/content/myloc/about-Abc/community/diversity-and-inclusion.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Giving Back",
"pagePath":"http://myloc2/working/giving-back/Pages/default.aspx",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Ideas Community",
"pagePath":"/content/myloc/about-Abc/initiatives/ideas.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Other Communities",
"pagePath":"http://myloc2/working/get-involved/Pages/default.aspx",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"View All",
"pagePath":"/content/myloc/about-Abc/community/view-all-community.html",
"openNewTab":false,
"hideInDesktopNav":true
},
{
"pageExist":true,
"pageTitle":"myloc Transformation",
"pagePath":"/content/myloc/about-Abc/community/transformation.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Calendar",
"pagePath":"/content/myloc/about-Abc/community/Calendar.html",
"openNewTab":false
}
],
"multiple":true,
"thirdLevelPageExist":true
},
],
"columnClass":"0",
"multiple":true,
"secondLevelPageExist":true
},
{
"pageExist":true,
"pageTitle":"Offices",
"pagePath":"http://www.yahoo.com",
"openNewTab":true,
"hideInDesktopNav":true,
"hideInTabletNav":true,
"hideInMobileNav":true,
"secondLevelChildList":[
{
"pageExist":true,
"pageTitle":"Locations",
"pagePath":"/content/myloc/offices/locations.html",
"openNewTab":false,
"thirdLevelChildList":[
{
"pageExist":true,
"pageTitle":"Ashburn",
"pagePath":"/content/myloc/offices/locations/ashburn.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Austin",
"pagePath":"/content/myloc/offices/locations/austin.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Bangalore",
"pagePath":"/content/myloc/offices/locations/bangalore.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Denver",
"pagePath":"/content/myloc/offices/locations/denver.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Dubai",
"pagePath":"/content/myloc/offices/locations/dubai.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Foster City",
"pagePath":"/content/myloc/offices/locations/foster-city.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"San Francisco",
"pagePath":"/content/myloc/offices/locations/san-francisco.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Miami",
"pagePath":"/content/myloc/offices/locations/miami.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Singapore - Singpost",
"pagePath":"/content/myloc/offices/locations/singapore-singpost.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Singapore - Robinson Road",
"pagePath":"/content/myloc/offices/locations/singapore-robinson-road.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"View All",
"pagePath":"http://myloc.trusted.Abc.com/content/myloc/offices/locations.html",
"openNewTab":true
}
],
"multiple":true,
"thirdLevelPageExist":true
},
{
"pageExist":true,
"pageTitle":"Quick Links",
"pagePath":"/content/myloc/offices/quick-links.html",
"openNewTab":true,
"hideInDesktopNav":true,
"hideInMobileNav":true,
"thirdLevelChildList":[
{
"pageExist":true,
"pageTitle":"Copy Centers",
"pagePath":"/content/myloc/offices/quick-links/copy-centers.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Floor Maps",
"pagePath":"/content/myloc/offices/quick-links/floor-maps.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"Food Services",
"pagePath":"/content/myloc/offices/quick-links/food-services.html",
"openNewTab":false
},
{
"pageExist":true,
"pageTitle":"View All",
"pagePath":"/content/myloc/offices/quick-links/view-all.html",
"openNewTab":false
}
],
"multiple":true,
"thirdLevelPageExist":true
},
{
"pageExist":true,
"pageTitle":"Facilities Help",
"pagePath":"/content/myloc/offices/facilities-help.html",
"openNewTab":false,
"thirdLevelChildList":[
{
"pageExist":true,
"pageTitle":"Submit Request",
"pagePath":"http://servicerequest",
"openNewTab":true
},
{
"pageExist":true,
"pageTitle":"View All",
"pagePath":"/content/myloc/offices/facilities-help/view-all-facilities-help.html",
"openNewTab":false,
"hideInDesktopNav":true
}
],
"multiple":true,
"thirdLevelPageExist":true
},
{
"pageExist":true,
"pageTitle":"View All",
"pagePath":"/content/myloc/offices/view-all-offices.html",
"openNewTab":false,
"hideInDesktopNav":true,
"thirdLevelChildList":[
],
"thirdLevelPageExist":false
}
],
"columnClass":"3",
"multiple":true,
"secondLevelPageExist":true
},
{
"pageExist":true,
"pageTitle":"Functions",
"pagePath":"https://www.google.com",
"openNewTab":true,
"hideInDesktopNav":true,
"hideInTabletNav":true,
"hideInMobileNav":true,
"secondLevelChildList":[
],
"columnClass":"1",
"multiple":true,
"secondLevelPageExist":true
},
{
"pageExist":true,
"pageTitle":"My HR",
"pagePath":"/content/myloc/my-hr.html",
"openNewTab":false,
"secondLevelChildList":[
],
"columnClass":"1",
"multiple":true,
"secondLevelPageExist":true
},
{
"pageExist":true,
"pageTitle":"Tools",
"pagePath":"/content/myloc/tools.html",
"openNewTab":true,
"secondLevelChildList":[
],
"columnClass":"1",
"multiple":true,
"secondLevelPageExist":true
}
]
};
$scope.showDiv = function(){
$timeout(function(){
this.hovering = true;
}, 500);
};
$scope.hideDiv = function(){
$timeout(function(){
this.hovering = false;
}, 500);
};
}]);
.hiding-div{
display: inline-block;
padding: 10px;
margin: 10px;
}
.menu-link{
text-decoration: none;
}
.menu-link:hover{
color: #AB09AF;
}
.farm-links{
position: absolute;
top: 50px;
height: 400px;
width: 700px;
border: 1px solid lightgrey;
padding: 5px;
display: flex;
word-wrap: flex;
column-count: 4;
}
.groups-links{
display: inline-block;
margin-right: 60px;
}
.group-title{
color: grey;
text-decoration: none;
}
.group-links{
list-style: none;
}
.second-link{
margin-left: -40px;
}
.second-link > a{
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<nav ng-app="topNavApp" ng-controller="navCtrl" class="nav">
<div class="nav-center">
<!--<li ng-repeat="obj in pageData.allChildList" ng-model="parentNav" ng-mouseover="parentNav=true" ng-mouseleave="parentNav=false"> -->
<div ng-repeat="obj in pageData.allChildList" class="hiding-div" ng-mouseover="showDiv()" ng-mouseleave="hideDiv()" >
<div>
<a ng-href="{{obj.pagePath}}" class="main-link multiple menu-link">{{obj.pageTitle}}</a>
<!--<span class="main-link mobile" aria-labelledby="{{obj.pageTitle}}" aria-expanded="false">{{obj.pageTitle}}</span>-->
<!--<span ng-repeat="child in obj.secondLevelVoList" class="childNav" ng-show="parentNav">-->
<div class="farm-links" ng-show="hovering">
<!--<a class="prev-link" aria-labelledby="{{obj.pagetitle}}">{{obj.pageTitle}}</a>-->
<div ng-repeat="child in obj.secondLevelChildList" class="groups-links">
<a ng-href="{{child.pagePath}}" class="group-title">{{child.pageTitle}}</a>
<!--<span class="group-title mobile" aria-expanded="false">{{child.pageTitle}}</span>-->
<ul ng-repeat="subchild in child.thirdLevelChildList" class="group-links">
<li class="second-link">
<a ng-href="{{subchild.pagePath}}">{{subchild.pageTitle}}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
不可能通过纯 CSS 来实现。问题出在您的 this.hovering
变量中,在您的情况下,它应该是 $scope.hovering
。
$scope.showDiv = function() {
$timeout(function() {
$scope.hovering = true;
}, 500);
};
$scope.hideDiv = function() {
$timeout(function() {
$scope.hovering = false;
}, 500);
};
更新
'$scope.hovering' shows all the submenus instead of showing up only the corresponding submenu. How do we fix that?
只需更新以下行:
HTML:
<div ng-repeat="obj in pageData.allChildList" class="hiding-div" ng-mouseover="showDiv(obj)" ng-mouseleave="hideDiv(obj)">
...
<div class="farm-links" ng-show="obj.hovering">
控制器:
$scope.showDiv = function(obj) {
$timeout(function() {
obj.hovering = true;
}, 500);
};
$scope.hideDiv = function(obj) {
$timeout(function() {
obj.hovering = false;
}, 500);
};
这里我们将当前 obj
从 ng-repeat
传递给 $scope.showDiv
和 $scope.showDiv
函数,然后我们设置一个新对象 属性,如下所示: obj.hovering = true;
或 obj.hovering = false;
。在这里 ng-show="obj.hovering"
我们是 showing/hiding 这个基于新 obj.hovering
属性 值的元素。
您必须在 $scope
上定义悬停。您可以使用数组来显示 ng-repeat
JS:
$scope.hovering=[];
$scope.showDiv = function(index) {
$timeout(function() {
$scope.hovering[index] = true;
}, 500);
};
$scope.hideDiv = function(index) {
$timeout(function() {
$scope.hovering[index] = false;
}, 500);
};
HTML:
<div ng-repeat="obj in pageData.allChildList" class="hiding-div" ng-mouseover="showDiv($index)" ng-mouseleave="hideDiv($index)" >
<div>