我试图显示和隐藏一个元素子元素,所以当我将鼠标悬停在 <li>
上时元素,我设置了一个 ng-show
值(value)false
对于所有元素。如果我尝试将值设为 true
为了显示,它向我显示了所有子元素。我只想显示悬停在其子元素上的每个元素:
HTML 代码:
<ul ng-init="show=false">
<li>
<a class="list-group-menu" href="#"><div class="icon-user"></div></a>
<div ng-show="show"> Profile </div>
</li>
<li>
<a class="list-group-menu" href="#"><div class="icon-scope"></div></a>
<div ng-show="show"> Scope </div>
</li>
<li>
<a class="list-group-menu" href="#"><div class="icon-job"></div></a>
<div ng-show="show"> Job </div>
</li>
<li>
<a class="list-group-menu" href="#"><div class="icon-login"></div>
<div ng-show="show"> Login </div>
</a>
</li>
<li>
<a class="list-group-menu" href="#"><div class="icon-register"></div></a>
<div ng-show="show"> Register </div>
</li>
</ul>
JQUERY 代码:
$('ul li').mouseenter(function() {
$(this).children('div').show();
});
$('ul li').mouseleave(function() {
$(this).children('div').hide();
});
最佳答案
这不是一种 Angular 方式。你应该这样做。
JS
angular.module("firstApp").controller("myCtrl",function($scope) {
$scope.allMenu = ["Profile","Scope","Job","Login","Register"];
});
HTML
<ul ng-controller="myCtrl">
<li ng-repeat="menuName in allMenu" ng-mouseenter="show=true" ng-mouseleave="show=false">
<a class="list-group-menu" href="#"><div class="icon-user"></div></a>
<div ng-show="show"> {{menuName}} </div>
</li>
</ul>
关于javascript - 使用 AngularJs 显示/隐藏元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21856112/