Polymer 聚合物1.x:点击纸卡标题切换铁折叠
我想通过仅单击Polymer 聚合物1.x:点击纸卡标题切换铁折叠,polymer,polymer-1.0,paper-elements,Polymer,Polymer 1.0,Paper Elements,我想通过仅单击纸卡的标题来切换纸卡元素内容的打开/关闭状态 当我在打开的内容中单击时,我希望卡片保持打开状态。并且不会切换到关闭状态 http://jsbin.com/kecemorojo/edit?html,输出 <!doctype html> <head> <meta charset="utf-8"> <!---- > <base href="https://polygit.org/components/"> &l
纸卡
的标题
来切换纸卡
元素内容的打开/关闭状态
当我在打开的内容中单击时,我希望卡片保持打开状态。并且不会切换到关闭状态
http://jsbin.com/kecemorojo/edit?html,输出
<!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>
<!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>
我想在这个内容区域内做一些事情。其中一些会涉及到点击东西。但当我点击东西时,我希望这张纸卡保持打开而不是关闭。所以我仍然可以看到这个文本和其他我需要点击的东西。但是,不幸的是,在这个设置中,当你点击这个文本时,卡片关闭,没有人可以再阅读文本。我正在寻找一个解决方案,让我打开和关闭卡点击标题“点击我打开”。现在点击这一段,明白我的意思了吗。仔细观察。不要像我想要的那样一直开着。
(功能(){
聚合物({
是:“x元素”,
_toggleCollapse:function(){
这是$.collapse.toggle();
},
});
})();
,至少还有两种其他解决方案:
if (e.target.classList.contains('title-text'))
及
根据具体情况,一个或另一个可能会更好地工作,具体取决于在纸卡
内容
部分中单击的内容
http://jsbin.com/kacatozolo/1/edit?html,输出
<!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>
<!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>
我想在这个内容区域内做一些事情。其中一些会涉及到点击东西。但当我点击东西时,我希望这张纸卡保持打开而不是关闭。所以我仍然可以看到这个文本和其他我需要点击的东西。但是,不幸的是,在这个设置中,当你点击这个文本时,卡片关闭,没有人可以再阅读文本。我正在寻找一个解决方案,让我打开和关闭卡点击标题“点击我打开”。现在点击这一段,明白我的意思了吗。仔细观察。不要像我想要的那样一直开着。
(功能(){
聚合物({
是:“x元素”,
_toggleCollapse:函数(e){
if(例如target.classList.contains('title-text','style-scope','paper-card')){
这是$.collapse.toggle();
}
},
});
})();
此处是接受答案演示。。。