javascript - 使用 jQuery 控制元素高度 - 为什么这不起作用？

Question

我正在尝试使用由 jQuery 中的“onmouseover”触发的函数来更改 div 元素的高度。但是，当我将鼠标悬停在元素上时，什么也没有发生。控制台中没有错误，据我所知，这应该可以正常工作。任何建议将不胜感激。谢谢你的帮助。

function lowerRaise() {
  var getHeiggt = document.getElementsByClassName('searchItem')[0];
  var tehHeiegt = jQuery(getHeiggt).height();
  var allTIms = document.getElementsByClassName('searchItem');
  
  if (tehHeiegt > 0) {
    for (i = 0; i < allTIms.length; i++) {
      jQuery(allTIms[i]).height("9px");
      jQuery(allTIms[i]).css("padding-top", "3px");
      jQuery(allTIms[i]).css("padding-bottom", "10px");
    }
  } else {
    for (i = 0; i < allTIms.length; i++) {
      jQuery(allTIms[i]).height("0px");
      jQuery(allTIms[i]).css("padding-top", "0px");
      jQuery(allTIms[i]).css("padding-bottom", "0px");
    }
  }
}

.searchItem {
  height: 9px;
  transition: 0.3s;
  background-color: white;
  color: black;
  padding: 3px 0px 10px 6px;
  border-bottom: 1px solid lightgrey;
  cursor: pointer;
}

.searchItem a {
  display: block;
  color: black;
  text-decoration: none;
}

.searchItem a:hover {
  display: block;
  color: black;
  text-decoration: none;
}

.searchItem:hover {
  background-color: lightgrey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form onmouseover="lowerRaise()" role="search" method="get" class="search-form" action="/">
  <label>
    		<span class="screen-reader-text">Search for:</span>
    		<input autocomplete="off" type="search" class="search-field" placeholder="Search …" value="" name="s">
    	</label>
  <input type="submit" class="search-submit" value="Search">
</form>
<div id="searchDrop" style="transition: 0.5s;">
  <div class="searchItem"><a style="" href="/?s=dress">Dresses</a></div>
  <div class="searchItem">Sweaters</div>
  <div class="searchItem">Blouses</div>
  <div class="searchItem">Pants</div>
  <div class="searchItem">Tops</div>
  <div class="searchItem">T-Shirts</div>
  <div class="searchItem">Skirts</div>
  <div class="searchItem">Shirts</div>
  <div class="searchItem">Blazers</div>
</div>

标签： javascriptjquery