Question

有点卡在这里。这是我现在的js：

     Polymer('test-element', {

          toggleOne: function() {
              var colOne = this.$.collapseOne;
              colOne.toggle();
          },

          toggleTwo: function () {
              var colTwo = this.$.collapseTwo;
              colTwo.toggle();
          }
      });

以及相应的html：

<div on-click="{{toggleOne}}">
    test test test
</div>

<core-collapse id="collapseOne">
    test test test test test
</core-collapse>

<div on-click="{{toggleTwo}}">
    test test test
</div>

<core-collapse id="collapseTwo">
    test test test test test
</core-collapse>

首先：有没有办法将其合并为一些更干净的代码？我喜欢其中的12个，所以看起来效率有点低......

其次：我认为我的第一个问题的答案将有助于此 - 我知道如何测试一个是否开放，但我不知道如何测试一个不同的表达式，如果那个是开放与否。例如，我需要检查

if (colOne.opened)

并设置

colTwo.closed

反之亦然，对所有人来说都是如此。我不想做像这样糟糕的事情：

if (colOne.closed && colTwo.closed && colThree.closed && colFour && ...)

我需要将它们放在我认为的相同功能中，对于如何格式化它有点困惑，如果有人可以解决一些问题？谢谢！任何帮助表示赞赏！

编辑：我知道聚合物有一个手风琴UI但是因为它的实验我还不想使用它。

Answer 1

执行此操作的一种方法是使用<core-selector>来管理选择状态，并确保只有一个<core-collapse>处于打开状态：

<core-selector selected="{{selected}}">
  <template repeat="{{item, i in items}}">
    <core-collapse opened?="{{selected == i}}" fixedSize style="height:150px">
      <div>...stuff...</div>
    </core-collapse>
  </template>
</core-selector>

通过一些额外的CSS，您可以获得类似：http://jsbin.com/mubekiyuvafi/1/edit

的内容

啊，看着polymer-ui-accordion（DEPRECATED），它扩展了聚合物选择器（核心选择器的前身）：）

如何使用聚合物核心像手风琴一样崩溃？

1 个答案: