Переключить опцию меню навигации по клику

0

Я хочу создать простые функции меню переключения для выпадающего меню. Я забираю код из столбца стека, но он более важен для функциональности табуляции.

Итак, как мы можем это сделать. И будет ли какая-нибудь проблема, если я использую jquery для этой цели.

http://jsfiddle.net/3G7Kd/107/

<div ng-app='app' class="filters_ct" ng-controller="selectFilter">
    <ul class="nav">
        <li ng-repeat="filter in filters" ng-click="select($index)" ng-class="{sel: $index == selected}">
            <span class="filters_ct_status"></span>
            {{filter.name}}

            <ul class="subul" ng-if=filter.lists.length>
                <li ng-repeat="list in filter.lists">
                    {{list}}
                </li>
            </ul>
        </li>
    </ul>
</div>

угловатый

var app = angular.module('app', []); 

app.controller('selectFilter', function($scope) {

    $scope.filters = [
            {
                "name": "service",
                'lists': ['service a','service b','service c','service d']
            },
            {
                'name': "about us",
                'lists': ['about us a','about us b','about us c','about us d']
            },
            {
                'name': "product",
                'lists': ['product a','product b','product c','product d']
            },
            {
                'name': "more",
                'lists': ['more a','more b','more c','more d']
            }
        ];
    $scope.selected = 0;

    $scope.select= function(index) {
       $scope.selected = index; 
    };
});
Теги:

1 ответ

3
Лучший ответ

Вероятно, вы просто хотите изменить ng-click с помощью ng-mouseover:

ng-mouseover="select($index)"

Я также добавил ng-mouseleave чтобы удалить любой выбор, когда вы покидаете элемент nav

Если вам нужен клик, и вы хотите, чтобы переключатель переключился (показать/скрыть), вам нужно изменить $scope.select:

$scope.select= function(index) {
   if ($scope.selected === index) 
       $scope.selected = null
   else
       $scope.selected = index; 
};

переключить JSFiddle

Mouseover JSFiddle

  • 0
    нужно сделать с кликом
  • 0
    Так в чем проблема с вашим кодом? Работает с кликом
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню