jquery - 在 Internet Explorer 11 中，悬停下拉菜单在选择之前关闭

Question

免责声明:我对所有编码都很陌生，所以 TIA 请您耐心等待......

我的任务是让一些不是我创建的页面正常运行，并且创建它的人不再是员工。我让它们在 Chrome 和 Firefox 中正常工作，但在 Internet Explorer 中却不行。页面中不起作用的部分是鼠标悬停时显示的下拉菜单，用于选择 map 中数据的显示方式(通过 jQuery 填充)。在 IE 中，当您单击下拉菜单将其打开以查看选择时，您可以查看它们，但是一旦您移动鼠标光标，菜单就会关闭，因此您无法选择任何内容。如果按住鼠标按钮，您可以查看整个菜单，但释放鼠标按钮或移动鼠标只会导致下拉列表关闭，而不会进行任何选择。

我一直在尝试研究可能导致问题的原因，据我所知，这可能是 jQuery 和/或 CSS 设置(z-index 或 top？)的问题，我尝试过更改CSS 设置，但无法引起下拉列表保持打开更长时间的任何更改。我对这个问题有点不知所措，如果有人能帮助我指出潜在的问题，以便我可以更具体地研究，那将非常感激。

我将尝试发布我认为相关代码的区域(如果需要，我也可以发布页面链接)，我在这里留下了注释，以防它们有帮助，因为它们是以前的编码器留下的:

CSS:

<style type="text/css">
#legend:hover div 
        {left:-60px !important;top:28px}
#linkdiv:hover div 
        {left:50px !important;top:24px}
#navstatus 
        {font-weight:bold;vertical-align:middle}
.dynamicdropdown {
    height: 30px;
    width: 250px;
    top:100%;
    z-index:5
}
#mapnavbox  {position:relative
            ;z-index:5
            ;text-align:left
            ;background-color:#F2FBFA
            ;padding:4px
            ;border:1px solid #666666
            ;width: 99%
            ;height:24px
            ;clear:both
            }   
.mapnav     {position:relative
            ;text-align:center
            ;background-color:#F2FBFA
            ;padding:4px
            ;width: 150px
            ;float:right
            ;z-index: 1000;
            }   
/*on hover over mapnav elements, bring div children back from banishment to off-stage left. */
.mapnav:hover div
            {left:0px; top:24px}
/*banish mapnav div child to off-stage left. */
.hiddenmenu {background-color:#F2FBFA !important
            ;border:solid #666666 1px
            ;position:absolute
            ;z-index: 1000
            ;top:100%
            ;left:-9999px /* Hide off-screen when not needed (this is more accessible than display:none;) */}                   

</style>

悬停菜单/下拉部分的代码:

<div id='params' class='mapnav' > 
        <strong>Change Parameter</strong>
<div class="hiddenmenu" style="height:200px">

<!---Setup the form fields for data selection--->

<form name="form2" id="form2" method="post" >
<cfoutput>
     <select name="dddmon" class="dynamicdropdown" id="dddmon" >
     <option value="0" >Month</option>
           <cfloop from="1" to="12" step="1" index="selmon" >
               <option value="#selmon#" >#MonthAsString(selmon)#</option>
          </cfloop>
</select>

   <select name="myear" id="myear" class="dynamicdropdown">
   <option value = "0">Year</option>
        <cfloop query="availableyears" >
            <option value="#year#">#year#</option>
       </cfloop>
</select>

<select name="wqparm_sel" class="dynamicdropdown" id="wqparm_sel">
     <optgroup label="Parameters:">
     <option value="1" selected="selected">Bottom DO (mg/l)</option>
     <option value="2">Secchi Depth (meters)</option>
     <option value="3">Salinity (ppt)</option>
     <option value="4">Water Temperature (°F)</option>
     <option value="5">pH</option>
     …
     Etc.
     …
     </optgroup>
</select>
                </cfoutput> 

<input name="thesubmit" type="button" value="Submit" 
                onClick="populateMap(jQuery('#dddmon').val(),jQuery('#myear').val(),jQuery('#wqparm_sel').val()); showData(); getmyLegend(); ga('send', 'event', { eventCategory: 'SubmitButton', eventAction: 'click', eventLabel: 'CurrentConditions', eventValue: 1});"/>
      </form>

任何见解或指导将非常感激!

Answer 1

这在 Internet Explorer 中很常见，这是一个很可能没有纯 CSS 修复的错误，至少我知道。您可以尝试用自定义元素替换您的选择，但我认为一点 javascript 在这里会有很大帮助。在 IE 中使用 CSS 显示/隐藏菜单在重新创建菜单时给我带来了问题。根据 <select> 添加了用于停止事件传播的 javascript ID 和显示/隐藏菜单，效果很好。

$(document).ready(function() {
  $('.mapnav').mouseover(function() {
    $('.hiddenmenu').show();
  });

  $('.hiddenmenu').mouseleave(function() {
    $(this).hide();
  });

  $('#dddmon, #myear, #wqparm_sel').mouseleave(function(event) {
    event.stopPropagation();
  });

});

.dynamicdropdown {
  height: 30px;
  width: 250px;
  top: 100%;
  z-index: 5
}

.mapnav {
  position: relative;
  text-align: center;
  background-color: #F2FBFA;
  padding: 4px;
  width: 150px;
  /* float: right; */
  z-index: 1000;
}

/*.mapnav:hover div {
   left: 0px;
   top: 24px 
}*/

.hiddenmenu {
  background-color: #F2FBFA !important;
  border: solid #666666 1px;
  position: absolute;
  z-index: 1000;
  top: 100%;
  /* left: -9999px; */
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='params' class='mapnav'>
  <strong>Change Parameter</strong>

  <div class="hiddenmenu" style="height:200px">
    <!---Setup the form fields for data selection--->
    <form name="form2" id="form2" method="post">
      <cfoutput>
        <select name="dddmon" class="dynamicdropdown" id="dddmon">
          <option value="0">Month</option>
          <option value="#selmon#">#MonthAsString(selmon)#</option>
        </select>

        <select name="myear" id="myear" class="dynamicdropdown">
          <option value="0">Year</option>
          <cfloop query="availableyears">
            <option value="#year#">#year#</option>
          </cfloop>
        </select>

        <select name="wqparm_sel" class="dynamicdropdown" id="wqparm_sel">
          <optgroup label="Parameters:">
            <option value="1" selected="selected">Bottom DO (mg/l)</option>
            <option value="2">Secchi Depth (meters)</option>
            <option value="3">Salinity (ppt)</option>
            <option value="4">Water Temperature (°F)</option>
            <option value="5">pH</option>
            … Etc. …
          </optgroup>
        </select>
      </cfoutput>

      <input name="thesubmit" type="button" value="Submit" onClick="populateMap(jQuery('#dddmon').val(),jQuery('#myear').val(),jQuery('#wqparm_sel').val()); showData(); getmyLegend(); ga('send', 'event', { eventCategory: 'SubmitButton', eventAction: 'click', eventLabel: 'CurrentConditions', eventValue: 1});"
      />
    </form>

在 IE11、IE10 和 IE9 中测试。可能可以追溯到更早的时候，所以你可以根据需要检查一下。如果需要的话，这是我正在使用的 JSFiddle:http://jsfiddle.net/ts0wb0tz/7/