onmouse hover dropdown

Question

Я пытаюсь навести курсор мыши на анимированное раскрывающееся меню, которое я не могу получить, если я перемещаю мышь с вкладки, выпадающее меню не должно быть видимым. У меня есть ссылка в раскрывающемся списке, если щелкнуть по указанной ссылке. Ниже мой код:

$("#newOne").mouseover(function() { 
 
    $("#newOneMenu").slideDown("slow") 
 

 
}); 
 

 
$(".tab-body").click(function() { 
 
    $("#newOneMenu").slideUp("slow") 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tab-body"> 
 
    <ul class="tabs"> 
 
    <li class="newOne" style=" width:10%"> 
 
     <input type="radio" checked name="tabs" id="tab1"> 
 
     <label id="newOne" for="tab1">January <span> <img src="img/nav_arrow.png" border="0" style="vertical-align:middle;"/></span> 
 
     </label> 
 
     <div id="newOneMenu" style="width: 133px; height: 100px; display:none;background-color: #f5fbfe;position: absolute; z-index: 9999;left: 3px;"> 
 
     <table width="100%" style="margin-top:2px;" cellpadding="3"> 
 
      <tr> 
 
      <td style="height:25px;"> 
 
       <div class="moreactions-16">New</div> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td style="height:25px;"> 
 
       <div class="moreactions-16">Listing</div> 
 
      </td> 
 
      </tr> 
 
     </table> 
 
     </div> 
 
     <div id="tab-content1" class="tab-content animated fadeIn" style=" height:400px;"> 
 
     <div style="width:95%; height:200px; float:left;"> 
 
      <ul class="tabsSub"> 
 
      <li id="products_details_tab"> 
 
       <input type="radio" name="tabsSub" checked id="tabsSub2"> 
 
       <div style="color:#0088cc; font-size:14px; font-weight:bold; padding:0 0 5px 0;">January</div> 
 
       <div id="tabsSub-content2" style="display:block; "> 
 
       <h4>Januaray 1st week</h4> 
 
       <div class="frm"> 
 
        <div> 
 
        <div class="firstDiv"> 
 
         <label>Winter</label> 
 
         <div> 
 
         <input type="text" style="width:95%;" /> 
 
         </div> 
 
        </div> 
 
        <div class="firstDiv"> 
 
         <label>Monsoon</label> 
 
         <div> 
 
         <input type="text" style="width:95%;" /> 
 
         </div> 
 
        </div> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <input type="radio" name="tabs" id="tab2"> 
 
     <label for="tab2">Feburary</label> 
 
     <div id="tab-content3" class="tab-content animated fadeIn" style="height:400px;"> 
 
     <div style="width:95%; height:200px; float:left;"> 
 
      <ul class="tabsSub"> 
 
      <li> 
 
       <input type="radio" name="tabsSub3" checked id="tabsSub3"> 
 
       <div id="tabsSub-content3" style="display:block; "> 
 
       <h4></i>Seasons </h4> 
 
       <div class="frm"> 
 
        <div> 
 
        <div class="firstDiv"> 
 
         <label>Winter</label> 
 
         <div> 
 
         <input type="text" style="width:95%;" /> 
 
         </div> 
 
        </div> 
 
        <div class="firstDiv"> 
 
         <label>Monsoon</label> 
 
         <div> 
 
         <input type="text" style="width:95%;" /> 
 
         </div> 
 
        </div> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

следующий обработчик будет скользить вверх меню, когда мышь покидает вкладку с JQuery 2.1.3. Похоже, что некоторые из старых версий jQuery не останавливают анимацию правильно, когда вызывается stop(), поэтому, если есть зависимость от более старой версии jQuery, тогда это не сработает.

$("#newOne").mouseout(function() { 
    $("#newOneMenu").stop().slideUp("slow") 
}); 

Затем вы можете добавить еще два обработчика, так что, когда мышь находится над меню не скользили, и будет скользить вверх по отведению указателя мыши.

$("#newOneMenu").mouseover(function() { 
    $("#newOneMenu").stop().slideDown("slow") 
}); 

$("#newOneMenu").mouseout(function() { 
    $("#newOneMenu").stop().slideUp("slow") 
}); 

Обратите внимание на использование stop() функции - вы будете необходимости добавлять, что к другим функциям, а также, в противном случае вы можете в конечном итоге с меню вверх и вниз замедленным образом, если пользователь перемещается переключение/выключение/выключение/выключение мыши.

Answer 2

$("#newOne").mouseover(function() { 
    $("#newOneMenu").stop().slideDown("slow") 

}); 

$("#newOne").mouseout(function() { 
    $("#newOneMenu").stop().slideUp("slow") 

});