我使用的是聚合物,但我在事件等方面遇到了一些麻烦。我想创建一个扩展的搜索栏,类似于
我当前的代码如下所示:
代码:
// This is where things are a little unclear for me. So far, I have tried the following:
expand: function() {
var divToStretch = this.$.stretchMe;
if ( /*search bar is open*/ ) {
//remove "stretched" css from "stretch" div
} else {
//add "stretched" css to "stretch" div
}
}

div.stretch {
border: 1px solid black;
width: 25px;
height: 25px;
border-radius: 25px;
transition: width 1s;
}
.stretched {
width: 500px;
}

<div class="stretch" id="stretchMe">
<iron-icon class="search" icon="search" on-click="expand"></iron-icon>
</div>
&#13;
答案 0 :(得分:2)
我可以建议纯CSS替代吗?您可以通过添加tabIndex="0"
来使搜索栏获得焦点。通过这种方式,您可以为div.stretch:focus
提供样式,允许您在用户单击或关注元素时动态更改其大小,并在用户关注其他内容时再次将其缩小。
它非常简单,优雅,不需要很多代码,可以满足您的需求。试一试!
div.stretch {
border: 1px solid black;
width: 25px;
height: 25px;
border-radius: 25px;
transition: width 1s;
}
div.stretch:focus {
width: 500px;
}
<div class="stretch" id="stretchMe" tabIndex="0">
<iron-icon class="search" icon="search" on-click="expand"></iron-icon>
</div>
或者,你可以在:hover
上做同样的事情,如果这就是你所追求的,只需更改选择器即可。如果您愿意,可以将两者结合使用。以下是:hover
示例。
div.stretch {
border: 1px solid black;
width: 25px;
height: 25px;
border-radius: 25px;
transition: width 1s;
}
div.stretch:hover {
width: 500px;
}
<div class="stretch" id="stretchMe">
<iron-icon class="search" icon="search" on-click="expand"></iron-icon>
</div>
答案 1 :(得分:0)
您可以使用toggle
的{{1}}方法:
classList
答案 2 :(得分:0)
经典的方法如下:
if (/*search bar is open*/) {
divToStretch.style.width = "auto";
} else {
divToStretch.style.width = "500px";
}
但我强烈建议您使用this.$.stretchMe.classList.toggle('stretched');
了解更多here