在没有jquery的情况下单击Polymer展开div。

Question

我用的是聚合物，但我在事件之类的事情上遇到了一些麻烦。我想创建一个扩展的搜索栏，类似于

​

​

我的当前代码如下所示：

代码：

​

// 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>

​

Answer 1

我可以建议一个纯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>

​

Answer 2

为此，可以使用classList的classList方法：

expand : function() {
  this.$.stretchMe.classList.toggle('stretched');
}

Answer 3

经典的方法如下：

if (/*search bar is open*/) {
    divToStretch.style.width = "auto";
 } else {
    divToStretch.style.width = "500px";
 }

但我强烈建议使用this.$.stretchMe.classList.toggle('stretched');

阅读更多这里