在jQuery中懸停/鼠標懸停事件的下拉菜單

Question

我正在嘗試使懸停下拉菜單，但我不能，也不是真的，我可以使菜單切換隻是具體項目，與我的代碼顯示所有可用的項目：

代碼在這裏：

$(document).on('ready', function(){ 
 
     var timeout = 0; 
 
     $('.nav').hover(function(){ 
 
      $('.dropdown-menu').slideDown('fast'); 
 
     },function(){ 
 
      timeout = setTimeout(hideMenu,300); 
 
     }); 
 
    
 
     $(".dropdown-menu").hover(function(){ 
 
      clearTimeout(timeout); 
 
     },function(){ 
 
      hideMenu(); 
 
     }); 
 
    }); 
 
    
 
    function hideMenu(){ 
 
     $(".dropdown-menu").slideUp('fast'); 
 
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<nav class="navbar navbar-static-top navbar-default"> 
 
       <div class="container"> 
 
        <div id="cls"> 
 
        <div class="navbar-header center"> 
 
         <div class="navbar-header"> 
 
         <a href="/"><img class="logo" src="paruno_logo.png"></a> 
 
         <ul id="main-menu" class="nav navbar-nav ref"> 
 
          <li class="dropdown dropdown-large option"> 
 
          <a id="drop-to" href="/femenino/calzado" class="dropdown-toggle firstTextOption" data-toggle="dropdown">GIRL</a> 
 
           <ul class="dropdown-menu dropdown-menu-large row change-f"> 
 
           <li class="n-smasd"> 
 
            <ul> 
 
             <li class="dropdown-header title"><a href="/femenino/calzado/zapato">Zapatos</a></li> 
 
            </ul> 
 
            <ul> 
 
             <li class="dropdown-header title"><a href="/femenino/calzado/botin">Botines</a></li> 
 
            </ul> 
 
            <ul> 
 
             <li class="dropdown-header title"><a href="/femenino/calzado/bota">Botas</a></li> 
 
            </ul> 
 
            <ul> 
 
             <li class="dropdown-header title"><a href="/femenino/calzado/sandalia">Sandalias</a></li> 
 
            </ul> 
 
            <ul> 
 
             <li class="dropdown-header title"><a href="/femenino/calzado/tenis">Tenis</a></li> 
 
            </ul> 
 
           </li> 
 
           </ul> 
 
          </li> 
 
          <li class="dropdown dropdown-large option hidden-sm hidden-xs">|</li> 
 
          <li class="dropdown dropdown-large option"> 
 
          <a id="drop-to" href="/masculino/calzado" class="dropdown-toggle firstTextOption" data-toggle="dropdown">HUMMIE</a> 
 
          <ul class="dropdown-menu dropdown-menu-large row change-f"> 
 
           <li class="col-sm-3 option-sm"> 
 
            <ul> 
 
             <li class="dropdown-header title"><a href="/masculino/calzado/casual">Casuales</a></li> 
 
            </ul> 
 
            <ul> 
 
             <li class="dropdown-header title"><a href="/masculino/calzado/mocasin">Mocasines</a></li> 
 
            </ul> 
 
           </li> 
 
           <li class="col-sm-3 option-sm"> 
 
            <ul> 
 
             <li class="dropdown-header title"><a href="/masculino/calzado/bota">Botas</a></li> 
 
            </ul> 
 
            <ul> 
 
             <li class="dropdown-header title"><a href="/masculino/calzado/tenis">Tenis</a></li> 
 
            </ul> 
 
           </li> 
 
          </ul> 
 
          </li> 
 
          <li class="dropdown dropdown-large option hidden-sm hidden-xs">|</li> 
 
          <li class="dropdown dropdown-large option"> 
 
          <a id="drop-to" href="#" class="dropdown-toggle firstTextOption" data-toggle="dropdown">SOULCREATION</a> 
 
           <ul class="dropdown-menu dropdown-menu-large row change-f"> 
 
           <li class="col-sm-3 option-sm"> 
 
            <ul> 
 
             <li class="dropdown-header title"><a href="/rapsodia_lookbook_fall16/">ANGER</a></li> 
 
            </ul> 
 
           </li> 
 
           <li class="col-sm-3 option-sm"> 
 
            <ul> 
 
             <li class="dropdown-header title"><a href="/rapsodia-lookbook-2/">SOUL</a></li> 
 
            </ul> 
 
           </li> 
 
           <li class="col-sm-3 option-sm"> 
 
            <ul> 
 
             <li class="dropdown-header title"><a href="/revista-rapsodia-1/">URBAN</a></li> 
 
            </ul> 
 
           </li> 
 
           <li class="col-sm-3 option-sm"> 
 
            <ul> 
 
             <li class="dropdown-header title"><a href="/revista-rapsodia-1/">ART</a></li> 
 
            </ul> 
 
           </li> 
 
           <li class="col-sm-3 option-sm"> 
 
            <ul> 
 
             <li class="dropdown-header title"><a href="/revista-rapsodia-1/">ALAN ARROUND THE MUNDO</a></li> 
 
            </ul> 
 
           </li> 
 
           </ul> 
 
          </li> 
 
          <li class="dropdown dropdown-large option hidden-sm hidden-xs">|</li> 
 
          <li class="dropdown dropdown-large option"> 
 
          <a id="drop-to" href="/femenino/calzado" class="dropdown-toggle firstTextOption"> MAGNIFICIENT </a> 
 
          </li> 
 
         </ul>     
 
         </div> 
 
        <!-- /MB --> 
 
        </div> 
 
        </div> 
 
       </div>

爲了提供更多的信息，我用引導做出響應navbar，我不希望從引導使用JavaScript怎麼一回事，因爲我想要得到一個純粹的Javascript。

Answer 1

好吧，不知道當你使用Jquery和bootstrap（它也使用Jquery）時，純js意味着什麼。但是將該功能添加到您的代碼中

$(document).on('mouseover','.dropdown-toggle',function(e){ 
    $(this).parent('li').children('ul').slideDown('fast'); 
}); 

這將打開下拉菜單。爲了隱藏它，你可以研究更多。

另外我注意到你有幾個元素具有相同的id =「drop-to」。 Id值應該是唯一！名稱和類可以在多個元素上相同。