Question

我在悬停下拉菜单时遇到了一些问题，当我将光标移出鼠标中心ID以进入子菜单导航时，它会滑动。我整天都在撕破我的头发来解决这个问题，我尝试了很多我在网上找到的例子，但我没有找到解决办法。任何帮助将不胜感激

 var menu = $('.menu')
 menu.hide();
 $("#mainbutton").mouseenter(function(){
   $(".menu").stop().slideDown("fast");
 });
 $("#mainbutton").mouseleave(function(){
   $(".menu").stop().slideUp("fast");
 });

Fiddle

Answer 1

离开整个nav时将其设为幻灯片：

 $("#nav").mouseleave(function(){
   $(".menu").stop().slideUp("fast");
 });

Fiddle Example

Answer 2

试试这个

$("#dropdown_container").mouseleave(function(){
       $(".menu").stop().slideUp("fast");
     });

这是一个工作示例/代码段

＆＃13;

$(document).ready(function () {
     var menu = $('.menu')
     menu.hide();
     $("#mainbutton").mouseenter(function(){
       $(".menu").stop().slideDown("fast");
     });
     $("#dropdown_container").mouseleave(function(){
       $(".menu").stop().slideUp("fast");
     });

    // Slide Tabs
	// Insert Slider
	$('.nav_slide_title').append('<div id="slider"></div>');
	// Initially Reset
	var left = $('.nav_slide_title > li a').parent().position().left;
	var width = $('.nav_slide_title > li a').width();
	
	$('#slider').css({'left' : left, 'width' : width});

	// Sliding
	$('a.sub_title').hover(function(){
	   
	    var left = $(this).parent().position().left;
	    var width = $(this).width();
	    
	    $('#slider').stop().animate({
	        'left' : left,
	        'width' : width, duration:400
	    });
	});
    
      // Tabs Content
    $(".nav_slide_title li").hover(function() {
        $(".tab-content").removeClass('tab-show');
        $(".tab-titles li").removeClass('active');                  
        $(this).addClass("active");                 
        var selected_tab = $(this).find(".sub_title").attr("name");
        $(selected_tab).addClass("tab-show");
    });
    
}); // End

＆＃13;

span:focus,a:focus { outline: 0; border: none }
.nav_clear::before, .nav_clear::after {
    content: "";
    display: table;
    clear: both
}
#navbar {
    width: 100%;
    position: relative;
    overflow: visible
}
ul,li {
    padding: 0;
    margin: 0;
    list-style:none
}
#nav a {
    text-transform: uppercase;
    text-decoration: none;
    color: #CFCFCF
}
/* First Title */
#nav #nav_wrapper > li {
    display:inline-block;
    height: 1.85em;
    padding: 0% 6.5% 0% 0%
}
#nav #nav_wrapper > li.first { padding-left: 7.5% }
#nav #nav_wrapper > li > a {
    letter-spacing: 0.5px;
    padding: 0.3em 1.6em;
    display: inline-block;
    font-size: 0.8em;
    color:#000
}
/* End First Title */
#dropdown_container {
    background:#222;
    height: 300px;
    overflow:visible
}
#dropdown_container .nav_slide_title {
    position: relative;
    height: 48px;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #222;
    border-bottom: 3px solid #4C4C4C;
    z-index: 1;
    overflow: hidden
}
#dropdown_container .nav_slide_title > li {
    float: left;
    width: 16.66%;
    height: 100%;
    list-style: none;
    text-align:  center   
}
#dropdown_container .nav_slide_title .sub_title {
    display: block;
    cursor: pointer;
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: medium none;
    color: #D8D8D8;
    padding: 15px 25px;
    z-index: 1
}
#dropdown_container .tab-content { display: none }
#dropdown_container .tab-show { 
    display: block;
    padding-top: 20px;
    text-align: center;
    color: #fff
}
#dropdown_container #slider {
    position: absolute;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    height: 100%;
    width: 16.66% !important;
    padding: 0;
    margin-left: 1px;
    background-color: #4C4C4C;
    z-index: -1
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
	<nav id="nav">
		<ul id="nav_wrapper" class="nav_clear">
			<li class="first">
				<a id="mainbutton" href="#">Menu1</a>
			</li>
			<li class="second">
				<a id="" href="#">Menu2</a>
			</li>
			<!-- Drop down Joaillerie -->
			<div id="dropdown_container" class="menu nav_clear">
				<ul class="nav_slide_title">
					<li><a class="sub_title" href="#" name="#tab1" >tabs1</a></li>	    
					<li><a class="sub_title" href="#" name="#tab2" >tabs2</a></li>
					<li><a class="sub_title" href="#" name="#tab3" >tabs3</a></li>
					<li><a class="sub_title" href="#" name="#tab4" >tabs4</a></li>
					<li><a class="sub_title" href="#" name="#tab5" >tabs5</a></li>
					<li><a class="sub_title" href="#" name="#tab6" >tabs6</a></li>
				</ul>

				<!-- Tabs -->
				<div id="tab1" class="tab-content tab-show">
					<div class="taglist">Content 1</div>
				</div>
				<div id="tab2" class="tab-content nav_clear">
					<div>Content 2</div>	
				</div>
				<div id="tab3" class="tab-content nav_clear">
					<div>Content 3</div>	
				</div>
				<div id="tab4" class="tab-content nav_clear">
					<div>Content 4</div>	
				</div>
				<div id="tab5" class="tab-content nav_clear">
					<div>Content 5</div>	
				</div>
				<div id="tab6" class="tab-content nav_clear">
					<div>Content 6</div>	
				</div>
			</div>
		</ul>
	</nav> 
</div> <!-- Navbar -->

＆＃13;

导航时保持下拉菜单打开

2 个答案: