Question

所以我的问题是我有一个主导航，在“产品”下面有一个下拉菜单。我找到了下拉菜单，将其设置为display：none，然后将jQuery写入slideToggle菜单，当特定LI悬停时。问题是，当我将鼠标悬停在“产品”LI上并尝试将鼠标悬停在下拉列表上时，它会消失，因为我不再盘旋在那个LI上。

你可能在想“只做嵌套列表!!!!”。好吧，我不想。我有一些jQuery应用于主导航，我不想影响下拉列表。我只是想要一种方法来确保当鼠标悬停在主LI或下拉UL上时下拉列表打开，并且当鼠标悬停在任何一个上时，下拉列表都会关闭。

在我的代码中，我试图制作它，以便如果鼠标在下拉列表UL上它保持打开状态，但鼠标离开LI可能胜过它？请帮忙！我的HTML和jQuery在下面。

链接到我正在处理的整个页面：http://heylush.net/driven/

HTML：

              <ul id="topnav">
                    <li class="home"><a href="index.html">Home</a></li>
                    <li class="aboutus"><a href="#">About Us</a></li>
                    <li class="products" class="drop1"><a href="#">Products</a></li>
                    <li><a href="#">Industries</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Partners</a></li>
                    <li><a href="#">Contact Us</a></li>
              </ul><!--#topnav-->
              <ul id="products-nav">
                    <li><img src="images/nav-arrow.png" /><a href="#">Overview</a></li>
                    <li><img src="images/nav-arrow.png" /><a href="#">Roadside Assistance</a></li>
                    <li><img src="images/nav-arrow.png" /><a href="#">Tire &amp; Wheel</a></li>
                    <li><img src="images/nav-arrow.png" /><a href="#">Key Replacement</a></li>
                    <li><img src="images/nav-arrow.png" /><a href="#">Dent Repair</a></li>
                    <li><img src="images/nav-arrow.png" /><a href="#">Windshield Protection</a></li>
              </ul><!--#products-nav-->

jQuery的：

        $(document).ready(function() {
            $('ul#products-nav').css('display', 'none');
            $('li.products').mouseenter(function(){
                $('ul#products-nav').slideToggle('medium');
            }).mouseleave(function(){
                $('ul#products-nav').slideToggle('medium');
            });
            $('ul#products-nav').mouseenter(function(){
                $(this).css('display', 'block');
            }).mouseleave(function(){
                $(this).css('display', 'none');
            });
            $('ul#products-nav li').mouseenter(function(){
                $(this).children('img').replaceWith('<img src="images/hover-arrow.png" />');
                $(this).children('a').css('color', '#6da3e0');
            }).mouseleave(function(){
                $(this).children('img').replaceWith('<img src="images/nav-arrow.png" />');
                $(this).children('a').css('color', '#2160ac');
            });
        });

Answer 1

你应该将你的product-nav ul放在li里面，所以当鼠标超过ul时，它将会超过li。

          <ul id="topnav">
                <li class="home"><a href="index.html">Home</a></li>
                <li class="aboutus"><a href="#">About Us</a></li>
                <li class="products" class="drop1"><a href="#">Products</a>
                    <ul id="products-nav" style="display:none">
                      <li><img src="images/nav-arrow.png" /><a href="#">Overview</a></li>
                      <li><img src="images/nav-arrow.png" /><a href="#">Roadside Assistance</a></li>
                      <li><img src="images/nav-arrow.png" /><a href="#">Tire &amp; Wheel</a></li>
                      <li><img src="images/nav-arrow.png" /><a href="#">Key Replacement</a></li>
                      <li><img src="images/nav-arrow.png" /><a href="#">Dent Repair</a></li>
                     <li><img src="images/nav-arrow.png" /><a href="#">Windshield Protection</a></li>
                  </ul><!--#products-nav-->
                </li>
                <li><a href="#">Industries</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Partners</a></li>
                <li><a href="#">Contact Us</a></li>
          </ul><!--#topnav-->

slideToggle下拉菜单没有嵌套列表

1 个答案: