html 表单上的 JavaScript 或 jQuery

Question

这很清楚，我知道如何处理这个问题。我已经尽我所能修复它，因为它是别人的工作被修改，所以很难找到该怎么做。我还远远不够精通自己做这件事。不够清楚见谅！

这个主题不再受支持，尽管它是相当新的my-horse.com.au。当您将鼠标悬停在搜索图标上时，页面顶部会下拉一个搜索区域，并显示一个带有几个选择框的搜索区域。

这是有关如何设置表单的基本信息。 #search-hover 包含#search，#search 包含表单。唯一的问题发生在选择框上，而不是标准输入框上。

<div id="search-hover" style="height: 70px;">
  <div id="search">
    <form id="search-spots" action="http://my-horse.com.au" method="post">
  <span id="finish-filter" class="responsive-only"><i class="icon-ok"></i> Finish Filtering</span>
  <div class="large-4 columns" id="search-form-column-1">
    <label class="sf_if_1222">Country</label>
    <input type="hidden" name="has_changed_country" id="has_changed_country" value="false">
    <div class="select-replace parent-1222 sf_if_1222 type-dropdown">
      <select name="country" class="parent-1222 sf_if_1222 type-dropdown" onchange="jQuery('#has_changed_country').val('true');  jQuery('#search-spots').submit(); jQuery('#has_changed_country').val('false');" style="display: block; opacity: 0;">
        <option value="">All</option>
        <option value="587">Australia</option>
        <option value="3270">New Zealand</option>
        <option value="2471">United States</option>
        <option value="1409">United Kingdom</option>
        <option value="4103">France</option>
        <option value="4291">Germany</option>
        <option value="1291">Italy</option>
        <option value="3322">Spain</option>
      </select>
    </form>
  </div>
</div>

据我所知，该问题仅存在于 IE 中（哈哈）。我已经尝试了一些使用 JS 来解决问题的方法，但我不太擅长。当您单击选择框并将鼠标悬停在下拉列表中的任何内容上时，会发生什么情况，整个搜索区域会向上滑动。 这是我尝试过的一些不同的脚本，但没有任何结果。

onMouseEnter="document.getElementById('search-hover').style.height = '281px';
onMouseExit="document.getElementById('search-hover').style.height = '70px';
onMouseOver="document.getElementById('search-hover').style.height = '281px';
onMouseOut="document.getElementById('search-hover').style.height = '70px';
onFocus="document.getElementById('search-hover').style.height = '281px';
$("#search select").mouseenter(function () {
$('#search-hover').css({"height","281px"});
});

$("#search select").mouseleave(function () {
$('#search-hover').css({"height", "70px"});
});

这是我认为控制搜索区域的 jQuery

http://pastebin.com/m3J9DLNH

谁能帮我解决我可能出错的地方或指出正确的方向？

我的想法是这样的——

onFocus = get.elementId('search select') 然后告诉 #search-hover 的 CSS 将 height 设置为 281px

可以很容易地贯穿整个网站的东西。根据我在不同论坛上阅读的内容，IE 在表单中进入下拉区域时会离开“div”区域。我不太确定为什么，但这显然是经常发生的事情。我基于我的发现 IE select issue with hover 我试图弄清楚如何在我的表单中实现，但不知道如何实现，因为我对 JS 没有任何好处。

感谢您提供的任何帮助！

Answer 1

我相信插件中已经有一些代码可以尝试纠正这个问题。 不幸的是，代码尝试检测 IE 并失败了，因为检测方法不再适用于最新版本的 IE。

尝试将searchShowOnHover 中的代码navigator.userAgent.toLowerCase().indexOf("msie") != -1 更新为navigator.userAgent.toLowerCase().indexOf("trident/") != -1。