javascript - 如何使用 Polymer 打开另一个面板时关闭一个面板

Question

我有一个熨斗列表，其中有一个设置图标，单击该图标会导致一个带有设置选项的面板滑出。但是，当我打开一个面板时，我希望在打开另一个面板时将其关闭排。目前我可以同时打开它们，这不是最佳选择。

请查看 gif 以了解我面临的问题。

问题的 GIF

HTML/polymer

<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) 在切换类中，触发如下事件

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 的对象中添加 bool 属性，将其传递给 settins 组件并在 tolggleSetings 中将属性设置为 true方法。

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

在父组件中，向该属性添加一个观察者，并将其余所有属性设置为 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.
  }
}