Question

我正在尝试在纯Angular中实现类似手风琴的东西。

我有一个常见问题解答列表，隐藏了答案（通过css display：none;）。我想让它工作，这样当你点击一个问题，然后出现答案。如果再次单击该问题，答案将再次隐藏。

使用以下指令一切正常：

.directive('toggleOpen', function toggleOpen() {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.bind('click', function () {
                if(element.parent().children().hasClass('open')) {
                    element.parent().children().removeClass('open');
                } else {
                    element.parent().children().addClass('open');
                }
            });
        }
    }
});

因此，有一堆父（）。儿童（）无意义的原因是我无法工作的部分。

我们假设您有2个问题，1和2.当页面加载时，两个答案都被隐藏。用户点击问题1，答案1取消隐藏。目前，当您单击问题2时，回答2取消隐藏，这也是正确的 - 但我只想要一次打开一个答案。因此，如果显示答案1并且用户点击问题2，我希望答案1隐藏，并回答2以显示。

我有一个css课程＆＃39; open＆＃39;我申请取消隐藏答案。基本上 - 我怎样才能找到所有具有“开放”类别的元素。并将其删除，然后将其应用于用户点击的元素？

是否有＆＃34;纯＆＃34;有角度的方式来做到这一点？

TIA

Answer 1

你可以用模板逻辑完成所有工作，不需要任何指令：

<section ng-class="{open: selected=='q1'}">
  <question ng-click="selected='q1'" ></question>
  <answer></answer>
</section>
<section ng-class="{open: selected=='q2'}">
  <question ng-click="selected='q2'" ></question>
  <answer></answer>
</section>
<section ng-class="{open: selected=='q3'}">
  <question ng-click="selected='q3'" ></question>
  <answer></answer>
</section>

查找Angular指令中的所有元素

1 个答案: