Раскрывающееся меню не закрывается при втором нажатии

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

Я думаю, 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
}

Answer 2

Вот как вы можете это сделать, заметьте, я удалил два одинаковых метода (displayDropdown) в стилях 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%;
	}

<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>