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

时间:2019-01-09 00:28:05

标签: javascript jquery

我正在尝试使用由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>

0 个答案:

没有答案