Блог

отказ от ответственности: я очень новичок во всем кодировании, так что спасибо за ваше терпение…

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

Любая информация или рекомендации будут очень признательны!

Это довольно распространенное явление в Internet Explorer, это ошибка, которая, скорее всего, не имеет исправления в чистом CSS, по крайней мере, о котором я знаю. Вы могли бы попытаться заменить свой выбор пользовательскими элементами, но я думаю, что немного javascript здесь будет иметь большое значение. Использование CSS для отображения / скрытия меню, в то время как в IE, вызвало у меня проблемы при воссоздании этого. Добавлен javascript для остановки распространения событий по <select> идентификаторам и отображения / скрытия меню, и он отлично работает.

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