搜索栏不会与div高度动画一起消失

Question

我有一个div，我曾经只是使用JS隐藏和显示，这工作正常，但是在使用高度显示和隐藏div后，搜索栏（在div内）不会消失，即使它被包含在div内。 [我不想使用jQuery] 之前： 后： JS：

document.getElementById('top_line_2a').addEventListener('click', function() {
      var searchClickIcon = document.getElementById('top_line_2a');
      var searchClick = document.getElementById('top_line_3');
      if(searchClick.style.height == '0em') {
        //searchClick.style.display = 'block';
        searchClick.style.height = '3em';
        searchClickIcon.style.color = 'white';
        searchClickIcon.style.textShadow = '0px 0px 7px white';
        document.getElementsByClassName('search')[0].focus();
      } else {
        //searchClick.style.display = 'none';
        searchClick.style.height = '0em';
        searchClickIcon.style.color = 'rgba(255, 187, 61, 1)';
        searchClickIcon.style.textShadow = '';
      }
    })

HTML：

<div id='top_line_3'><div class='search-main'><input class='search' placeholder="Search for a product" type='text'/></div></div>

CSS：

#top_line_3 {
    clear: both;
    height: 3em;
    background-color: #3d3d3d;
    box-shadow: inset 0 5px 5px #1c1c1c;
}

Answer 1

如果高度为零，您的<div>仍将显示其内容。要解决此问题，您可以在overflow:hidden上设置<div> CSS属性。它外边的元素将被隐藏。

此外，如果属性值为零，则无需指定单位。 0em, 0px, ...与0相同。