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

为了提供更多信息，我使用 Bootstrap 制作响应式 navbar，我不想使用 Bootstrap 中的 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 值应该唯一!名称和类可以在多个元素上相同。