如何使用聚合物打开另一个面板时关闭一个面板

我有一个熨烫列表，其中有一个设置图标，点击时会导致面板滑出设置选项。但是，当我打开一个面板时，我是希望它在打开另一行的面板时关闭。目前，我有它在哪里都可以同时打开，这是不是最佳的。如何使用聚合物打开另一个面板时关闭一个面板

请参阅我面临的问题的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>

聚合物JS

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

来源

2017-06-21 physicsboy

难道我的误解你的问题还是这个问题这么简单？

您试图一次只能打开一个设置，对吧？所以当用户按下一个设置时，所有其他设备都需要关闭。

只需找到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"))以适合您的代码

我用聚合物原生函数toggleClass。更多信息你可以在这里找到https://www.polymer-project.org/1.0/docs/api/Polymer.Base#method-toggleClass

来源

2017-06-21 14:16:57

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

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对象的布尔属性，它传递给settins组件，并设置该属性为true在tolggleSetings方法。

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. 
    } 
}

来源

2017-06-21 18:02:43

如何使用聚合物打开另一个面板时关闭一个面板

回答

相关问题