我正在尝试制作并悬停下拉菜单，但我不能，不是真的，我可以让菜单切换特定项目，我的代码显示所有可用项目：
代码在这里：
$(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>
为了提供更多信息，我使用Bootstrap来制作响应式navbar，我不想使用Bootstrap中的Javascript，因为我想获得一个纯粹的Javascript。
答案 0 :(得分：1)
好的，当您使用Jquery和bootstrap（也使用Jquery）时，不知道纯js是什么意思。但是将该功能添加到您的代码中
$(document).on('mouseover','.dropdown-toggle',function(e){
$(this).parent('li').children('ul').slideDown('fast');
});
这将打开下拉菜单。为了隐藏它，你可以研究更多。
另外我注意到你有几个元素具有相同的id =“drop-to”。 Id值应唯一！多个元素上的名称和类可以相同。