下拉菜单 li:hover 停止工作，必须点击打开子菜单

Question

我有一个带有 4 个按钮的响应式下拉菜单，其中一个按钮打开一个子菜单（组合）。它工作得很好，除了当我单击“portafolio”按钮（不应单击，因为它使用悬停功能）时，它会关闭子菜单，并且在我再次单击该按钮之前它不会打开或关闭。正如我所说，它不应该被点击，但这是可能发生的错误。

$(document).ready(main);
 
var contador = 1;
 
function main () {
	$('.bt-menu').click(function(){
		if (contador == 1) {
			$('nav').animate({
				left: '0'
			});
			contador = 0;
		} else {
			contador = 1;
			$('nav').animate({
				left: '-100%'
			});
		}
	});
 
	// Mostramos y ocultamos submenus
	$('.submenu').click(function(){
		$(this).children('.children').slideToggle();
	});
}

* {
	padding:0;
	margin:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.menu_bar {
	display:none;
}

header {
	width:100%;
}

header nav {
	z-index:1000;
	width:100%;
	margin:0 auto;
}

header nav ul {
	list-style:none;
}

header nav ul li {
	display:inline-block;
	position:relative;
}

header nav ul li a {
	color:white;
	display:block;
	text-decoration:none;
	padding:20px 20px 10px 20px;
}

header nav ul li:nth-child(3n+3) a {  
  color: #999;
}

header nav ul li .caret {
	position:relative;
	top:3px;
	margin-left:10px;
	margin-right:0;
}

header nav ul li:hover .children {
	display:block;
}

header nav ul li .children {
	display: none;
	position: absolute;
	background-color: white;
	width: 200%;
	z-index: 1000;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	letter-spacing: 0;
}

header nav ul li .children li {
	display:block;
	overflow:hidden;
	border-bottom:1px solid #E6E6E6;
	min-width:50%;
}

header nav ul li .children li:nth-child(odd) {
    float: left;

}
header nav ul li .children li:nth-child(even) {
    float: right;
}

header nav ul li .children li a {
	display:block;
	color:#111;
	padding:15px 25px;
}

header nav ul li .children li a:hover {
	background-color:#E6E6E6;
}


@media screen and (max-width: 800px) {
	body {
		padding-top:40px;
	}
	
	.menu_bar {
		display:block;
		width:100%;
		position:fixed;
		top:0;
		background:black;
		z-index:1100;
		background:green;
	}
	
	.menu_bar .menu-logo {
		display:block;
		padding:20px 20px 10px 20px;
		color:white;
		overflow:hidden;
		float:left;
		width:80%;
		font-size:24pt;
		letter-spacing:-2pt;
	}
	
	.menu_bar .bt-menu{
		display:block;
		padding:20px 20px 10px 20px;
		color:white;
		overflow:hidden;
		font-size:25px;
		text-decoration:none;
		float:right;
		width:20%
	}
	
	.menu_bar span {
		float:right;
		font-size:30px;
		position:relative;
	}
	
	header nav {
		width:85%;
		height:calc(100% - 67px);
		position:fixed;
		right:100%;
		margin:0;
		overflow:scroll;
		background:black;
	}
	
	header nav ul li {
		display:block;
		border-bottom:1px solid #111;
	}
	
	header nav ul li a {
		display:block;
	}
	
	header nav ul li .children {
		width:100%;
		position:relative;
	}
	
	header nav ul li .children li {
		display:block;
		overflow:hidden;
		border-bottom:1px solid #E6E6E6;
		min-width:100%;
	}

	header nav ul li .children li:nth-child(odd) {
    	float: none;

	}
	header nav ul li .children li:nth-child(even) {
    	float: none;
	}
	
	header nav ul li:hover .children {
		display:none;
	}
	
	header nav ul li .children li a {
		margin-left:;
	}
	
	header nav ul li .caret {
		float:right;
	}

<div id="header">
  <div id="header-logo">
    <div id="logo1"><a href="index.html" target="_self">ARMANDO</a></div>
    <div id="logo2"><a href="index.html" target="_self">RODRIGUEZ</a></div>
    <div class="fotografia" id="logo3"><a href="index.html" target="_self">fotografía</a></div>
  </div>
  
  <div id="header-menu">
  	<header>
    	<div class="menu_bar">
        	<div class="menu-logo">ar</div><a href="#" class="bt-menu"><span class="icon-diafragma"></span></a>
		</div>
            
		<nav>
			<ul>
            	<li class="submenu">
                	<a href="#">portafolio <span class="caret icon-dropdown"></span></a>
                    <ul class="children">
                    	<li><a href="spacio.html">Spacio</a></li>
                        <li><a href="rancho.html">Rancho</a></li>
                        <li><a href="new_kid.html">New Kid</a></li>
                        <li><a href="retro.html">Retro</a></li>
                        <li><a href="isolated.html">Isolated</a></li>
                        <li><a href="portugal_vega.html">Portugal Vega</a></li>
                        <li><a href="serena.html">Serena Book</a></li>
                        <li><a href="summertime.html">Summertime</a></li>
                        <li><a href="numb.html">Numb.</a></li>
                        <li><a href="voyager.html">Voyager</a></li>
                        <li><a href="let_it_kill_you.html">Let It Kill You</a></li>
                        <li><a href="street_vision.html">Street Vision</a></li>
                        <li><a href="gamarra.html">Gamarra</a></li>
                    </ul>
                </li>
            	<li><a href="info.html">info</a></li>
            	<li><a href="promo.html">promo</a></li>
            	<li><a href="contacto.html">contacto</a></li>
			</ul>
		</nav>
	</header>
  </div>

以下是链接，您可以查看问题：

http://armandorodriguez.pe/info

jsfiddle.net/9fdhefqc/

我发现如果我将投资组合 href 从 '#' 设置为 ' ' 它不会发生，但是菜单将无法在移动设备上正常工作，所以这不是我要寻找的答案。

Answer 1

这是因为在单击该按钮后，您以某种方式在弹出的子菜单中添加了额外的 css style="overflow: hidden; display: none;"。在您再次单击以将 css 恢复为 display: block 之前，它将永远不会显示。

你可以修改相关的js文件，或者直接禁止点击。

Answer 2

在你的 js 文件中尝试这部分代码，

$(document).ready(function(){
  $(".submenu").onmouseover(function(){
    $(".children").show();
 }):
$(".submenu").onmouseout(function(){
    $(".children").hide();
 }):

}):

Answer 3

尝试将preventDefault() 添加到您的投资组合链接的点击处理程序中。顾名思义，它将阻止元素的默认操作，在这种情况下，它是跟随 URL。

$(".submenu").click(function(event){
    event.preventDefault(); });

另外，看起来您可能已经分配了一个点击处理程序来隐藏和取消隐藏 menu.js 中的“导航”。也许你的意思是这是一个hover 处理程序？换句话说，尝试改变这个

$('.bt-menu').click(function(){
        if (contador == 1) {

到这里

$('.bt-menu').hover(function(){
        if (contador == 1) {

在 menu.js 中。