Angularjs 在angular js中单击特定菜单时，如何关闭所有其他菜单？
我使用了简单切换中的切换菜单。但我的问题是，当我们点击特定菜单时，所有其他菜单都应该像手风琴菜单一样关闭 指令：Angularjs 在angular js中单击特定菜单时，如何关闭所有其他菜单？,angularjs,Angularjs,我使用了简单切换中的切换菜单。但我的问题是，当我们点击特定菜单时，所有其他菜单都应该像手风琴菜单一样关闭 指令： element.bind('click', function() { var content = target.querySelector('.slideable_content'); if(!attrs.expanded) { content.style.border = '1
element.bind('click', function() {
var content = target.querySelector('.slideable_content');
if(!attrs.expanded) {
content.style.border = '1px solid rgba(0,0,0,0)';
var y = content.clientHeight;
content.style.border = 0;
target.style.height = y + 'px';
} else {
target.style.height = '0px';
}
attrs.expanded = !attrs.expanded;
});
我的代码在这里：@Michael是对的，您可以使用双向数据绑定轻松地做到这一点
<section>
<ul>
<li>
<span ng-click="isExpanded = ! isExpanded">Show 1</span>
</li>
<li ng-show="isExpanded" slider id="test2">
<p>Are to hide and show adf</p>
</li>
</ul>
</section>
首先，不应该混合使用jQuery、Angular.element和纯Javascript.getElementById。这使得你的代码更难阅读。-你为什么不让Angular帮你处理膨胀和收缩呢。在“滑块”上使用ng show=“isExpanded”，并将状态保留在$scope model中，但如何在多个模式中实现？以及如何自动关闭其他模式？您可以使用ng click和ng-if/ng-show来实现这一点，请查看更新的答案，希望能有所帮助！但当一次点击打开任何li时，它也会像切换一样在第二次点击时关闭。请给出一点提示change@KishorParmar有更新的答案，希望有帮助！不客气！
<section>
<ul>
<li slider-toggle ng-click="expandItem = 1">Slider 1</li>
<li ng-if="expandItem == 1" slider id="test1">
<p>Are to hide and show</p>
</li>
<li slider-toggle ng-click="expandItem = 2">Slider 2</li>
<li ng-if="expandItem == 2" slider id="test2">
<p>Are to hide and show</p>
</li>
<li slider-toggle ng-click="expandItem = 3">Slider 3</li>
<li ng-if="expandItem == 3" slider id="test3">
<p>Are to hide and show</p>
</li>
<li slider-toggle ng-click="expandItem = 4">Slider 4</li>
<li ng-if="expandItem == 4" slider id="test4">
<p>Are to hide and show</p>
</li>
</ul>
</section>
script.js:
.directive('someDirective',function(){
return{
restrict:'A',
scope:true,
templateUrl:'someTemplate.html',
link: function(scope, element, attrs){
console.log(element) //This will be your element
}
}
})
main.html:
<li some-directive ng-click="expandItem = 4">Slider 4</li>
<body ng-app="myApp">
<section ng-controller="myCtrl">
<ul>
<li slider-toggle ng-click="setCurrentItem(1)">Slider 1</li>
<li ng-show="currentItem == 1" slider id="test1">
<p>Are to hide and show</p>
</li>
<li slider-toggle ng-click="setCurrentItem(2)">Slider 2</li>
<li ng-show="currentItem == 2" slider id="test2">
<p>Are to hide and show</p>
</li>
<li slider-toggle ng-click="setCurrentItem(3)">Slider 3</li>
<li ng-show="currentItem == 3" slider id="test3">
<p>Are to hide and show</p>
</li>
<li slider-toggle ng-click="setCurrentItem(4)">Slider 4</li>
<li ng-show="currentItem == 4" slider id="test4">
<p>Are to hide and show</p>
</li>
</ul>
</section>
</body>
var myApp = angular.module('myApp', []);
myApp.controller("myCtrl", ["$scope", function ($scope) {
$scope.currentItem = null;
$scope.setCurrentItem = function (itemId) {
if(itemId == $scope.currentItem){
$scope.currentItem = null;
}else{
$scope.currentItem = itemId;
}
}
}])