Question

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

我的任务是让一些页面工作，我没有创建，制作它的人不再是员工。我让他们在Chrome和Firefox中工作正常，但不是Internet Explorer。页面中不起作用的部分是鼠标悬停时显示的下拉菜单，用于选择如何显示地图中的数据（通过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会在这里走很长的路。使用CSS来显示/隐藏菜单，而在IE中，在重新创建时给了我一些问题。添加了javascript，用于停止每个<select> ID的事件传播并显示/隐藏菜单，效果很好。

＆＃13;

$(document).ready(function() {
  $('.mapnav').mouseover(function() {
    $('.hiddenmenu').show();
  });

  $('.hiddenmenu').mouseleave(function() {
    $(this).hide();
  });

  $('#dddmon, #myear, #wqparm_sel').mouseleave(function(event) {
    event.stopPropagation();
  });

});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

在IE11，IE10和IE9中测试过。可能会进一步后退，因此您可以根据需要进行检查。这是我在工作的JSFiddle，如果需要的话：http://jsfiddle.net/ts0wb0tz/7/

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

1 个答案: