如何使用聚合物打開另一個面板時關閉一個面板

我有一個熨燙列表，其中有一個設置圖標，點擊時會導致面板滑出設置選項。但是，當我打開一個面板時，我是希望它在打開另一行的面板時關閉。目前，我有它在哪裏都可以同時打開，這是不是最佳的。如何使用聚合物打開另一個面板時關閉一個面板

請參閱我面臨的問題的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

如何使用聚合物打開另一個面板時關閉一個面板

回答

相關問題