个人中心
gpt4 book ai didi

angularjs - 单击angular js中的特定菜单时如何关闭所有其他菜单？

转载 作者：行者123 更新时间：2023-12-05 04:15:55 26 4
gpt4 key购买 nike

我使用了简单切换菜单中的切换菜单。但我的问题是，当我们单击特定菜单时，所有其他菜单应该像 Accordion 菜单一样关闭。

指令:

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

最佳答案

@Michael 是对的，您可以使用双向数据绑定(bind)轻松做到这一点

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

通过这种方式你可以创建一个 Accordion 菜单，只需获取你想要显示的元素的值并使用 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>

更新

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

试试这个:

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>

应用程序.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;
        }

    }
}])

关于angularjs - 单击angular js中的特定菜单时如何关闭所有其他菜单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30026633/

26 4 0
文章推荐： vba - 如何删除由于 MS Access 中的错误而创建的表单的孤立代码隐藏模块
文章推荐： haskell - Yesod 中的复合主键
文章推荐： maven - 过滤不同编码的资源
文章推荐： sql - DB2 中是否存在 `when not matched by source`？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com