Question

我使用简单切换菜单切换菜单。但我的问题是，当我们点击特定菜单时，所有其他菜单应该像手风琴菜单一样接近。

指令：

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;
            });

当点击幻灯片上面的代码将执行。我需要一些逻辑，如关闭所有切换类名 slidable_content

我的代码在这里：Plunker

Answer 1

@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>

因此，如果需要，您可以控制其他菜单的状态

<强>更新

试试这个：

<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>

通过这种方式，您可以创建一个折叠式菜单，只需获取要显示的元素的值并使用ng-if指令进行验证（如果需要，可以使用ng-show，您可以找到差异这里：docs.angularjs.org/api/ng/directive)

注意：

你不应该使用jquery或javascript选择器获取DOM的元素，如果你想控制DOM的一个元素你可以使用一个指令，作为一个例子：

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>

<强>更新

如果要关闭当前打开的项目，可以使用函数控制打开/关闭状态。

试试这个：

main.html中

<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>

app.js

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; } } }])

单击角度js中的特定菜单时，所有其他菜单的距离有多近？

1 个答案: