使用Polymer

Question

我有一个铁列表，其中有一个设置图标，点击后会导致面板滑出设置选项。但是当我打开一个时，我希望它在打开面板时关闭另一个行。目前，我有它可以在同一时间打开，这不是最佳的。

请查看我面临的问题的gif。

问题的GIF

HTML /聚合物

<div class="container horizontal layout">
   <div class="settingsIconContainer">
       <paper-icon-button class="settingIcon" icon="settings" on-click="toggleSettings"></paper-icon-button>
    </div>
    <div id="edit" class="settings">
        <paper-icon-button icon="delete"></paper-icon-button>
        <paper-icon-button icon="create"></paper-icon-button>
        <paper-icon-button icon="clear" on-click="toggleSettings"></paper-icon-button>
    </div>
</div>

Polymer JS

toggleSettings : function(e) {
    this.$.edit.classList.toggle('settingsMove');
},

Answer 1

您不应该从子元素访问父元素。有两种方法可以做到这一点。

1）在toggle类中，按以下方式触发事件

toggleSettings : function(e) {
  this.fire('settings-icon-toggle');
}

在父元素中添加一个侦听器并侦听已触发的事件。

listeners:{
  'settings-icon-toggle': '_onSettingsIconToggle'
},
_onSettingsIconToggle: function(e){
  //Using e.target.id, loop through all the settings and close them except the current one.
}

2）在您传递给iron-list的对象中添加一个布尔属性，将其传递给settins组件，并在tolggleSetings方法中将该属性设置为true。

toggleSettings : function(e) {
  this._isOpen = false;
}

在Parent组件中，向此属性添加一个观察者，并将其余所有属性设置为false。

observers:['_listChanged(arrayToIronList.*)'],
_listChanged:function(){
   var isOpenSubPath = e.path.indexOf('._isOpen')
  if( isOpenSubPath >=0){
    var index = parseInt(e.path.match(/\d+/g)[0]);
    //loop through the array and set all the _isOpen properties to false except the current one. 
    //You can find the current one using the index.
  }
}

Answer 2

我误解了你的问题还是这个问题很简单？

您尝试一次只打开1个设置，对吧？因此，当用户按下一个设置时，所有其他设置都需要关闭。

只需找到settingsMove类的所有元素，然后删除该类。

toggleSettings : function(e) {
    var elems = Polymer.dom(this.root).querySelectorAll(".settingsMove");
    for(var i = 0; i < elems.length; i++){
      this.toggleClass("settingsMove", false, elems[i]);
    }

    this.toggleClass("settingsMove", true, e.target.parentNode.parentNode.querySelector(".settings"))
}

我不知道设置课程settingsMove所需的元素。因此，请修改e.target.parentNode.parentNode.querySelector(".settings"))以适合您的代码

我使用了Polymer native function toggleClass。您可以在此处找到更多信息https://www.polymer-project.org/1.0/docs/api/Polymer.Base#method-toggleClass