Question

有人可以帮助我实现上一个/下一个按钮来浏览手风琴菜单项吗？当手风琴标题被点击时，手风琴本身可以正常工作，但除了这个基本功能之外，我还应该实现prev / next按钮。我基本上只想获取当前活动项目，然后使用下一个/上一个按钮转到下一个/上一个项目。如何在实践中实施？我尝试了这个，以便我正在评估isVisible属性，并检查哪个框是活动的，然后转到相邻的框但我无法使其工作，解决方案本身似乎不是很干净。我应该对项目进行某种索引并构建一个数组来循环其中的项目吗？我跟随小提琴：https://jsfiddle.net/cm70947/zq59tw7a/

HTML：

<body ng-app="myApp" ng-controller="myAppController">
<div class="Button" ng-click="animateBox('first box')">button</div>
<div class="Animated_Box" id="first" ng-show="isVisible == 'first     box'">Animated Box 1</div>
<div class="Button" ng-click="animateBox('second box')">button</div>
<div class="Animated_Box" id="second" ng-show="isVisible =='second box'">Animated Box 2</div>
<div class="Button" ng-click="animateBox('third box')">button</div>
<div class="Animated_Box" id="third" ng-show="isVisible =='third box'">Animated Box3</div>

<div id="navigation">
<div class="naviButton" id="goUp" ng-click="prevItem()">PREV</div>
<div class="naviButton" id="goDown" ng-click="nextItem()">NEXT</div>
</div>
</body>

JS： myApp = angular.module（'myApp'，[]）; myApp.controller（'myAppController'，function（$ scope）{

$scope.isVisible = 'first box';

$scope.animateBox = function (box) {
    if(box == $scope.isVisible){
        $scope.isVisible = null;
    }else{
        $scope.isVisible = box;
    }

}

$scope.prevItem = function () {

 //?
 }; 

});

浏览angularjs中的手风琴菜单项

0 个答案: