在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值应该是唯一！名称和类可以在多个元素上相同。