javascript - 在没有jquery的情况下单击Polymer js展开div

Question

我正在使用 Polymer，但我在处理事件等方面遇到了一些问题。我想创建一个扩展搜索栏，类似于

我当前的代码如下所示:

代码:

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