ホバーは、Internet Explorerで選択する前に閉じてドロップダウンメニュー11

Question

免責事項：私はあなたの忍耐のためにすべてのコードなので、TIAに非常に新しいです...

私は、私が作成していないことを取り組んでいくつかのページを取得する使命を帯びたとそれを作った人はもはや従業員ではありません。私は彼らがChromeとFirefoxではうまく動作していますが、Internet Explorerでは動作しません。ページ内で動作していない部分は、マウスオーバー時に表示されるドロップダウンメニューで、マップ内のデータの表示方法を選択するためのものです（jQueryを使用して入力します）。 IEでは、ドロップダウンメニューをクリックして選択項目を表示すると、その項目を表示できますが、マウスカーソルを移動するとすぐにメニューが閉じられ、何も選択できません。マウスボタンを押したままにするとメニュー全体を表示できますが、マウスボタンを放すかマウスを動かすだけで、選択なしでドロップダウンが閉じられます。

私はこの問題を引き起こしている可能性のあるものを調べようとしていましたが、これはjQueryやCSS設定（Z-インデックスまたはトップ？ CSS設定を変更してもドロップダウンの変更を引き出すことはできません。私は少しこれに圧倒されています。誰かが私がより具体的に研究できるように、根本的な問題であるかもしれないものに向けて私を指すのを助けることができれば、それは非常に高く評価されるでしょう。

関連コードであると思われる領域を投稿しようとします（必要に応じてページリンクを投稿することもできます）。以前のコーダー：

CSS：

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

：ホバーメニューの

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

コード/セクションドロップダウン

洞察や指導は非常に感謝しています！

Answer 1

これはInternet Explorerとよく似ていますが、少なくとも私が知っている純粋なCSS修正がないバグです。あなたはカスタムアイテムであなたの選択を置き換えることを試みることができますが、私は少しjavascriptがここに長い道のりを行くと思います。 IEを使っているときにCSSを使ってメニューを表示/非表示にすると、これを再現するときに問題が発生しました。 <select> IDごとにイベントの伝播を停止するためのjavascriptが追加され、メニューが表示/非表示になっています。 IE11、IE10、およびIE9でテスト

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

。おそらくさらに後ろに働くので、必要に応じてチェックすることができます。 http://jsfiddle.net/ts0wb0tz/7/