Hover выпадающего меню закрытия перед выбором в Internet Explorer 11

Question

отказа от ответственности: Я очень новый для всего кодирования, поэтому ТИА за ваше терпение ...

я была поставлена ​​задача получить некоторые страницы работы, которые я не создавал и человек, который его создал, уже не является сотрудником. У меня они работают нормально в 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 и показ/скрытие меню, и он отлично работает.

$(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/