Dropdown menu won't close on second click

Question

I've got a dropdown menu that opens on mobile when the user clicks on "Projects". When the user clicks on "Projects" again, I need the dropdown menu to close. I can't get it to close on the second click though. I'm assuming it's a quick fix, but I've got nothing.

Here is a Fiddle with all the code: http://jsfiddle.net/ch8j3zgs/1/

Here is the script:

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";
}
}       

Thank you guys! I appreciate it!

EDIT: I realize it is going to be hard to reproduce the error in the fiddle since you all can probably hover which works great! Hopefully seeing the code in the fiddle will help though! :)

Answer 1

This is how you can do that, Note - I've removed two same methods ( displayDropdown ) in the JS and :hover styles in the 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> 

Answer 2

I think Bootstrap will help you

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

Then use Javascript/JQuery to toggle the button

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