鼠标悬停时保持子菜单显示

时间：2016-12-14 15:28:44

标签： jquery html css mouseover mouseleave

我在这里有一点问题，

我有一个菜单，我想用div .submenuWrap在div中显示子菜单。如果菜单项有子菜单，它将显示此.submenuWrap中的子菜单，如果菜单项没有子菜单，则.submenuWrap根本不会显示。

我能解决的问题是，当我在子菜单中移动时，保持这个.submenuWrap显示，就在此刻，一旦我离开导航，它就会消失。

我把所有东西放在jsfiddle中，因为它更容易理解：

HTML 

<nav id="mainNav" role="navigation">
  <div class="container">
    <div id="mainMenu" class="collapse navbar-collapse">
      <ul class="nav">
        <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Buy Wine</a>
          <div class="dropdown-menu">
            <div class="col-sm-3 col-xs-12">
              <dl>
                <dt><a href="#">By Country</a></dt>
                <dd><a href="#" data-abbr="ar">Argentina</a></dd>
                <dd><a href="#" data-abbr="au">Australia</a></dd>
                <dd><a href="#" data-abbr="it">Italy</a></dd>
                <dd><a href="#" data-abbr="fr">France</a></dd>
                <dd><a href="#" data-abbr="es">Spain</a></dd>
                <dd><a href="#" data-abbr="gb">United Kingdom</a></dd>
              </dl>
            </div>
            <div class="col-sm-3 col-xs-12">
              <dl>
                <dt><a href="#">By Type</a></dt>
                <dd><a href="#">Red</a></dd>
                <dd><a href="#">White</a></dd>
                <dd><a href="#">Rose</a></dd>
                <dd><a href="#">Sparkling</a></dd>
                <dd><a href="#">Port</a></dd>
              </dl>
            </div>
            <div class="col-sm-3 col-xs-12">
              <dl>
                <dt><a href="#">By Something</a></dt>
                <dd><a href="#">Red</a></dd>
                <dd><a href="#">White</a></dd>
                <dd><a href="#">Rose</a></dd>
                <dd><a href="#">Sparkling</a></dd>
                <dd><a href="#">Port</a></dd>
              </dl>
            </div>
            <div class="col-sm-3 col-xs-12">
              <dl>
                <dt><a href="#">By Price</a></dt>
                <dd><a href="#">£0 - £50</a></dd>
                <dd><a href="#">£50 - £100</a></dd>
                <dd><a href="#">£100 - £200</a></dd>
                <dd><a href="#">£200 - £500</a></dd>
                <dd><a href="#">£500+</a></dd>
              </dl>
            </div>
          </div>
        </li>
        <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">en primeur</a>
          <div class="dropdown-menu">
            <div class="col-sm-6 col-xs-12">
              <dl>
                <dt><a href="#">PIRULO</a></dt>
                <dd><a href="#" data-abbr="ar">Argentina</a></dd>
                <dd><a href="#" data-abbr="au">Australia</a></dd>
                <dd><a href="#" data-abbr="it">Italy</a></dd>
                <dd><a href="#" data-abbr="fr">France</a></dd>
                <dd><a href="#" data-abbr="es">Spain</a></dd>
                <dd><a href="#" data-abbr="gb">United Kingdom</a></dd>
              </dl>
            </div>
            <div class="col-sm-6 col-xs-12">
              <dl>
                <dt><a href="#">PIRULA</a></dt>
                <dd><a href="#">Red</a></dd>
                <dd><a href="#">White</a></dd>
                <dd><a href="#">Rose</a></dd>
                <dd><a href="#">Sparkling</a></dd>
                <dd><a href="#">Port</a></dd>
              </dl>
            </div>
          </div>
        </li>
        <li><a href="#">latest offers</a></li>
        <li><a href="#">what's new</a></li>
        <li><a href="#">our blog</a></li>
        <li><a href="#">services</a></li>
      </ul>
    </div>
    <div class="submenuWrap"></div>
  </div>
</nav>

CSS 

   #mainNav {
     background-color: $white;
   border-top: 5px solid black;
   border-bottom: 5px solid black;
   }
  #mainMenu > ul {
      display: table;
         width: 100%;
         margin-bottom: 0;
  }
  #mainMenu > ul > li {
      display: table-cell;
  }
   #mainMenu > ul > li > a {
           text-align: center;
  }

  .submenuWrap {
    position: absolute;
    background-color: khaki;
       width: 98%;
       border-left: 5px solid #333333;
       border-right: 5px solid #333333;
       background-color: $white;
       margin: 0 auto;
       top: 50px;
       right: 0;
       left: 0;
       border-top: 0;
       display:block;
       z-index:6;       
     }

JS 

 var submenu = $(this).next(".dropdown-menu").html();
 $( "#mainMenu .dropdown-toggle" ).on({
    mouseover: function() {
    submenu = $(this).next(".dropdown-menu").html();
  }, mouseenter: function() {
     $(".submenuWrap").html(submenu).css("border-bottom", "5px solid black");
  }, mouseleave: function() {
     $(".submenuWrap").html("").css("border-bottom", "0");
  }
});

我尝试添加此内容：

 $( ".submenuWrap" ).on({
     mouseover: function() {
       $(this).css("display", "block");
  }, mouseleave: function() {
        $(this).css("display", "none");
  }
});

但它什么也没做，我也不明白为什么。

https://jsfiddle.net/yLpLfp9w/

有人能帮我一把吗？

谢谢

1 个答案:

答案 0 :(得分：1)

你的jsfiddle代码有问题，菜单html没有显示，只是一个黑条，所以这里有一个关于jQuery下拉菜单如何工作的CSS技巧的一个很好的例子： https://css-tricks.com/examples/SimplejQueryDropdowns/

使用代码： http://css-tricks.com/examples/SimplejQueryDropdowns.zip

我将在这里用上面的代码创建一个小提琴：

$(function(){

    $("ul.dropdown li").hover(function(){
    
        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');
    
    }, function(){
    
        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');
    
    });
    
    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" &raquo; ");

});
* 									{ margin: 0; padding: 0; }
body								{ font: 14px Helvetica, Sans-Serif; } 
#page-wrap							{ width: 800px; margin: 25px auto; } 
a									{ text-decoration: none; }
ul									{ list-style: none; }
p                                   { margin: 15px 0; }

/* 
	LEVEL ONE
*/
ul.dropdown                         { position: relative; }
ul.dropdown li                      { font-weight: bold; float: left; zoom: 1; background: #ccc; }
ul.dropdown a:hover		            { color: #000; }
ul.dropdown a:active                { color: #ffa500; }
ul.dropdown li a                    { display: block; padding: 4px 8px; border-right: 1px solid #333;
	 								  color: #222; }
ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover                { background: #F3D673; color: black; position: relative; }
ul.dropdown li.hover a              { color: black; }


/* 
	LEVEL TWO
*/
ul.dropdown ul 						{ width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li 					{ font-weight: normal; background: #f6f6f6; color: #000; 
									  border-bottom: 1px solid #ccc; float: none; }
									  
                                    /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a					{ border-right: none; width: 100%; display: inline-block; } 

/* 
	LEVEL THREE
*/
ul.dropdown ul ul 					{ left: 100%; top: 0; }
ul.dropdown li:hover > ul 			{ visibility: visible; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<title>Simple jQuery Dropdowns</title>
	
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection"/>
	<!--[if lte IE 7]>
        <link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
    <![endif]-->
			
	<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>	
	<script type="text/javascript" language="javascript" src="js/jquery.dropdownPlain.js"></script>
</head>

<body>

	<div id="page-wrap">
	
        <img src="images/title.png" alt="Simple jQuery Dropdowns" />
	   	   
        <p><a href="index-hoverIntent.html">With hoverIntent</a> | <a href="http://css-tricks.com/simple-jquery-dropdowns/">Article</a> | <a href="http://css-tricks.com/examples/SimplejQueryDropdowns.zip">Download</a></p>     

        <ul class="dropdown">
        	<li><a href="#">For Facilities</a>
        		<ul class="sub_menu">
        			 <li><a href="#">Artificial Turf</a></li>
        			 <li>
        				<a href="#">Batting Cages</a>
        				<ul>
        					<li><a href="#">Indoor</a></li>
        					<li><a href="#">Outdoor</a></li>
        				</ul>
        			 </li>
        			 <li><a href="#">Benches &amp; Bleachers</a></li>
        			 <li><a href="#">Communication Devices</a></li>
        			 <li><a href="#">Dugouts</a></li>
        			 <li><a href="#">Fencing &amp; Windscreen</a></li>
        			 <li><a href="#">Floor Protectors</a></li>
        			 <li><a href="#">Foul Poles</a></li>
        			 <li><a href="#">Netting</a></li>
        			 <li><a href="#">Outdoor Furniture &amp; Storage</a></li>
        			 <li><a href="#">Outdoor Signs</a></li>
        			 <li><a href="#">Padding</a></li>
        			 <li><a href="#">Scoreboards</a></li>
        			 <li><a href="#">Shade Structures</a></li>
        			 <li><a href="#"> - VIEW ALL - </a></li>
        		</ul>
        	</li>
        	<li><a href="#">Field Maintenance</a>
        		<ul class="sub_menu">
        			<li><a href="#">All-in-One Team Cart</a></li>
        			<li><a href="#">Air &amp; Electrical Reels</a></li>
        			 <li><a href="#">Field Drags</a></li>
        			 <li>
        				<a href="#">Field Marking Equipment</a>
        				<ul>
        					<li><a href="#">Batter's Box Templates</a></li>
        					<li><a href="#">Dryline Markers</a></li>
        					<li><a href="#">Field Paint</a></li>
        					<li><a href="#">Field Sprayers</a></li>
        					<li><a href="#">Stencils</a></li>
        				</ul>
        			 </li>
        			 <li>
        				<a href="#">Field Tarps</a>
        				<ul>
        					<li><a href="#">Area Tarps</a></li>
        					<li><a href="#">Growth Covers / Protectors</a></li>
        					<li><a href="#">Infield Tarps</a></li>
        					<li><a href="#">Tarp Accessories</a></li>
        				</ul>
        			 </li>
        			 <li><a href="#">Hand Tools</a></li>
        			 <li>
        				<a href="#">Irrigation, Hoses, Nozzles</a>
        				<ul>
        					<li><a href="#">Hoses &amp; Hose Reels</a></li>
        					<li><a href="#">Irrigation</a></li>
        					<li><a href="#">Nozzles</a></li>
        				</ul>
        			 </li>
        			 <li><a href="#">Layout &amp; Measurement Tools</a></li>
        			 <li><a href="#">Moisture Removal</a></li>
        			 <li><a href="#">Mound &amp; Home Plate Fortification</a></li>
        			 <li><a href="#">Mowers &amp; Stripers</a></li>
        			 <li><a href="#">Soil &amp; Enviornmental Management</a></li>
        			 <li><a href="#">Soil Amendments</a></li>
        			 <li><a href="#">Spreaders &amp; Sweepers</a></li>
        			 <li><a href="#"> - VIEW ALL - </a></li>
        		</ul>
        	</li>
        	<li><a href="#">Game-Practice Equipment</a>
        		<ul class="sub_menu">
        			 <li>
        				<a href="#">Baseball - Softball</a>
        				<ul>
        					<li><a href="#">Base Accessories</a></li>
        					<li><a href="#">Bases &amp; Home Plates</a></li>
        					<li><a href="#">Game Accessories</a></li>
        					<li><a href="#">Pitching Rubbers</a></li>
        				</ul>
        			 </li>
        			 <li>
        				<a href="#">Batting Practice Equipment</a>
        				<ul>
        					<li><a href="#">Backstops</a></li>
        					<li><a href="#">Infield Screens</a></li>
        					<li><a href="#">Jugs Pitching Machines</a></li>
        					<li><a href="#">Turf Mats</a></li>
        					<li><a href="#">Turf Protectors</a></li>
        					<li><a href="#">Replacement Accessories</a></li>
        				</ul>
        			 </li>
        			 <li>
        				<a href="#">Batting Cages</a>
        				<ul>
        					<li><a href="#">Indoor</a></li>
        					<li><a href="#">Outdoor</a></li>
        				</ul>
        			 </li>
        			 <li>
        				<a href="#">Portable Mounds</a>
        				<ul>
        					<li><a href="#">Batting Practice Mounds</a></li>
        					<li><a href="#">Game Mounds</a></li>
        					<li><a href="#">Practice Mounds</a></li>
        				</ul>
        			 </li>
        			 <li>
        				<a href="#">Football</a>
        				<ul>
        					<li><a href="#">First Down Markers</a></li>
        					<li><a href="#">Football Accessories</a></li>
        					<li><a href="#">Football Goalposts</a></li>
        				</ul>
        			 </li>
        			 <li>
        				<a href="#">Soccer</a>
        				<ul>
        					<li><a href="#">Soccer Goals</a></li>
        					<li><a href="#">Soccer Accessories</a></li>
        				</ul>
        			 </li>
        			 <li><a href="#"> - VIEW ALL - </a></li>
        		</ul>
        	</li>
        	<li><a href="#">Training &amp; Conditioning</a>
        		<ul class="sub_menu">
        			 <li><a href="#">Ladders &amp; Sticks</a></li>
        			 <li><a href="#">Hurdles</a></li>
        			 <li><a href="#">Training Accessories</a></li>
        			 <li><a href="#">Smart-Cart Training System</a></li>
        			 <li><a href="#">Smart-Hurdle Collection</a></li>
        			 <li><a href="#"> - VIEW ALL - </a></li>
        		</ul>
        	</li>
        	<li><a href="#">Books-Videos</a>
        		<ul class="sub_menu">
        			 <li><a href="#">Field Design &amp; Maintenance</a></li>
        			 <li><a href="#">Turf Management</a></li>
        			 <li><a href="#">Training</a></li>
        			 <li><a href="#"> - VIEW ALL - </a></li>
        		</ul>
        	</li>
        </ul>
		
	</div>

</body>

</html>

上面的代码在顶级ul中添加了一个名为“hover”的类，这样你就可以使用css来保持第一个子菜单打开。将鼠标悬停在子菜单ul上，然后将其可见性更改为“可见”，同时将类“悬停”保持在顶级ul。

您可以添加hoverIntent，延迟打开菜单，停止意外菜单打开，但这不是必需的。

在您的情况下，请确保只有当您将鼠标悬停在远离该元素及其子元素时才会删除顶级ul的“悬停”类（再次参见我发布的示例）。

相关问题
最新问题