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

Question

我有一个下拉菜单，当用户点击“元素”时，它会在移动设备上打开。当用户再次点击“元素”时，我需要关闭下拉菜单。我无法让它在第二次点击时关闭。我假设这是一个快速修复，但我什么都没有。

这是一个包含所有代码的 fiddle :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";
}
}       

谢谢大家!我很感激!

编辑:我意识到很难重现 fiddle 中的错误，因为你们都可以悬停，这很好用!希望看到 fiddle 中的代码会有所帮助! :)

Answer 1

这就是你可以做到的， 注意 - 我已经删除了 JS 中的两个相同方法 (displayDropdown) 和 CSS 中的 :hover 样式

$('#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%;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
   <ul>
      <li id="projects">
         Projects
         <ul>
            <a href="/one" class="blocklink">
               <li id="one">One</li>
            </a>
         </ul>
      </li>
   </ul>
</div>