jquery - 使用 Angular js 访问 DOM 元素兄弟

Question

我在指令中有一个链接功能，其中我有一个切换功能来编辑当前活动的 DOM 元素的 css 内容。如何访问该 DOM 元素的父类或子类。

指令的一部分：

   link: function(scope, element, attrs) {

        var title = angular.element(element.children()[0]),
            opened = true;

        title.bind('click', toggle);

        function toggle() {
            opened = !opened;
                element.removeClass(opened ? 'closed' : 'opened');                  
                element.addClass(opened ? 'opened' : 'closed');
            element.siblings().removeclass('opened').addclass('closed');  // What to do here  

        }

Answer 1

我会将您的链接功能更改为：

link: function(scope, element, attrs) {
    var title = angular.element(element.children()[0]),
        opened = true;

    title.bind('click', toggle);

    function toggle() {
        opened = !opened;
        element.parent().children().addClass("closed");
        element.parent().children().removeClass("opened");
        element.toggleClass("opened", opened);
        element.toggleClass("closed", !opened); //might be redundantdepending on the rest of your code

    }
}

我认为您的操作顺序错误，如果您首先删除/添加所需的所有类，然后修改元素，您将得到您想要的结果。只需选择元素父元素，然后获取它的所有父子元素。.children() 仅选择父级的直接后代，而类似的 .find() 方法将遍历层次结构。根据是否有其他方法可以关闭元素，可能不需要冗余代码。