聚合物1.x：通过单击纸牌标题来切换铁粉碎

我想通过仅点击paper-card的heading来切换paper-card元素内容的打开/关闭状态。聚合物1.x：通过单击纸牌标题来切换铁粉碎

当我在打开的内容中单击时，我希望卡保持打开状态。而不是切换到关闭状态。

Open this jsBin to read further and demo what I'm describing。

http://jsbin.com/kecemorojo/edit?html,output

<!doctype html> 
<head> 
    <meta charset="utf-8"> 
    <!---- > 
    <base href="https://polygit.org/components/"> 
    <!---- > 
    Toggle below/above as backup when server is down 
    <!----> 
    <base href="https://polygit2.appspot.com/components/"> 
    <!----> 
    <script src="webcomponentsjs/webcomponents-lite.min.js"></script> 
    <link href="polymer/polymer.html" rel="import"> 
    <link href="paper-card/paper-card.html" rel="import"> 
    <link href="iron-collapse/iron-collapse.html" rel="import"> 
</head> 
<body> 

<dom-module id="x-element"> 

<template> 
    <style></style> 
    <paper-card heading="Click Me to Open" on-tap="_toggleCollapse"> 
    <iron-collapse id="collapse"> 
     <div class="card-content"> 
     I want to do stuff inside this content area. Some of it will involve clicking things. But when I click things, I want this paper card to remain open and not close. So I can still see this text and the other things I need to click on. But, unfortunately, with this setup, when you click on this text, the card closes and no one can read the text anymore. I'm looking for a solution that let's me open and close the card by clicking on the header "Click Me to Open" only. See what I mean by clicking on this paragraph right now. Watch it close. And not remain open like I want it. 
     </div> 
    </iron-collapse> 
    </paper-card> 
</template> 

<script> 
    (function(){ 
    Polymer({ 
     is: "x-element", 
     _toggleCollapse: function() { 
     this.$.collapse.toggle(); 
     }, 
    }); 
    })(); 
</script> 

</dom-module> 

<x-element></x-element> 

</body>

来源

2016-03-03 Mowzer

接受的答案是演示这里... http://jsbin.com/numapuxova/1/edit?html,output – Mowzer

_toggleCollapse: function(e) { 
    if (!e.target.classList.contains('card-content')) { 
     this.$.collapse.toggle(); 
    } 
    }

来源

2016-03-03 00:43:33

In addition to the accepted answer，至少两个其它的解决方案也存在：

if (e.target.classList.contains('title-text'))

here

和

if (e.target.classList.contains('title-text', 'style-scope', 'paper-card'))

here

根据不同的情况，一种或另一种可能更好地工作取决于被点击的paper-cardcontent段内是什么。

http://jsbin.com/kacatozolo/1/edit?html,output

<!doctype html> 
<head> 
    <meta charset="utf-8"> 
    <!---- > 
    <base href="https://polygit.org/components/"> 
    <!---- > 
    Toggle below/above as backup when server is down 
    <!----> 
    <base href="https://polygit2.appspot.com/components/"> 
    <!----> 
    <script src="webcomponentsjs/webcomponents-lite.min.js"></script> 
    <link href="polymer/polymer.html" rel="import"> 
    <link href="paper-card/paper-card.html" rel="import"> 
    <link href="iron-collapse/iron-collapse.html" rel="import"> 
</head> 
<body> 

<dom-module id="x-element"> 

<template> 
    <style></style> 
    <paper-card heading="Click Me to Open" on-tap="_toggleCollapse"> 
    <iron-collapse id="collapse"> 
     <div class="card-content"> 
     I want to do stuff inside this content area. Some of it will involve clicking things. But when I click things, I want this paper card to remain open and not close. So I can still see this text and the other things I need to click on. But, unfortunately, with this setup, when you click on this text, the card closes and no one can read the text anymore. I'm looking for a solution that let's me open and close the card by clicking on the header "Click Me to Open" only. See what I mean by clicking on this paragraph right now. Watch it close. And not remain open like I want it. 
     </div> 
    </iron-collapse> 
    </paper-card> 
</template> 

<script> 
    (function(){ 
    Polymer({ 
     is: "x-element", 
     _toggleCollapse: function(e) { 
     if (e.target.classList.contains('title-text', 'style-scope', 'paper-card')) { 
      this.$.collapse.toggle(); 
     } 
     }, 
    }); 
    })(); 
</script> 

</dom-module> 

<x-element></x-element> 

</body>

来源

2016-03-03 06:54:19 Mowzer

聚合物1.x：通过单击纸牌标题来切换铁粉碎

回答

相关问题