Question

我有一个下拉菜单，当用户单击“项目”时，该菜单会在移动设备上打开。当用户再次单击“项目”时，我需要下拉菜单关闭。我无法在第二次点击时关闭它。我以为这是个快速解决方案，但我什么也没有。

这是一个带有所有代码的小提琴：http://jsfiddle.net/ch8j3zgs/1/

这是脚本：

function displayDropdown() {
var x = document.getElementById("nav ul ul");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}

function displayDropdown() {
var x = document.getElementById("nav ul ul");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}

谢谢你们！我很感激！

编辑：我知道很难在小提琴中重现错误，因为大家都可以将鼠标悬停在上面，效果很好！希望看到小提琴中的代码会有所帮助！：）

Answer 1

这是您可以执行的操作，注意-我已经删除了displayDropdown的{{1}}和JS样式的两个相同的方法（:hover）

CSS

$('#nav ul>li').click(function(){
	$(this).find('ul').toggle();
});

#nav {
	width: 100%;
	background-color: white;
}

#projects {
	display: inline-block;
}

#nav ul {
	font-family: Arial;
	font-size: 15px;
	font-weight: bold;
	color: #000000;
	list-style-type: none;
	text-align: center;
	margin: auto;
	padding-top: 6px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
  cursor:pointer;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#nav ul ul {
	width: calc(100% - 20px);
	list-style-type: none;
	font-weight: normal;
	display: none;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}



#one {
	padding-top: 10px;
	padding-bottom: 10px;
	border: 1px solid black;
	color: #000000;
	background-color: white;
}

#one:active {
	background-color: black;
	color: white;
}

#one:hover {
	background-color: black;
	color: white;
}

a.blocklink {
	text-decoration: none;
	color: inherit;
	display: block;
}

@media screen and (orientation: landscape) {
	#nav ul ul {
		width: 20%;
	}
	#footer-nav ul ul {
		width: 20%;
	}

Answer 2

我认为Bootstrap将为您提供帮助

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Project
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">One</a>
</div>

然后使用Javascript / JQuery切换按钮

$('.dropdown-toggle').dropdown(){
    //code here
}

下拉菜单不会在第二次单击时关闭

2 个答案: