Develop Reference

How can I fix this expanding issue?

So I'm trying to create an accordion style menu where if you click a panel it opens the section. If you click it again, it closes. On top of that, it should also close any other panel that was previously opened.
I've almost got that functionality but the problem is that I have to click it twice.
To see what I mean, check out this Fiddle
You'll notice that if you open link one then try to open link 2, you'll have to press link 2 twice.
How can I make it so that you only have to press it once to close link 1 but also open link 2 ?
let dropdown = document.querySelectorAll('.dropdown-toggle');
const handleClick = (e) => {
const active = document.querySelector('.open');
if(active){
active.classList.remove('open');
} else {
e.currentTarget.nextElementSibling.classList.add('open')
}
}
dropdown.forEach(element => {
element.addEventListener('click', handleClick);
});
body {
background: #ccc;
}
.menu {
background: #fff;
margin: 0 auto;
max-width: 400px;
}
.menu ul {
padding: 0;
text-align: center;
width: 100%;
}
.menu ul li {
list-style: none;
padding: 20px 0;
border-bottom: 1px solid #ccc;
}
.menu ul li a {
text-decoration: none;
}
.menu ul li .dropdown {
display: none;
padding: 20px;
background: grey;
}
.menu ul li .dropdown.open {
display: block;
}
<div class="menu">
<ul>
<li>
link 1
<div class="dropdown">Some text</div>
</li>
<li>
link 2
<div class="dropdown">Some text</div>
</li>
<li>
link 3
<div class="dropdown">Some text</div>
</li>
<li>
link 4
<div class="dropdown">Some text</div>
</li>
<li>
link 5
<div class="dropdown">Some text</div>
</li>
</ul>
</div>

Can use js like the following.
let dropdown = document.querySelectorAll('.dropdown-toggle');
const handleClick = (e) => {
const isLastOpenTargetClicked = e.currentTarget.nextElementSibling.classList.contains('open');
if(isLastOpenTargetClicked) {
e.currentTarget.nextElementSibling.classList.remove('open');
return;
}
const active = document.querySelector('.open');
if(active){
active.classList.remove('open');
}
e.currentTarget.nextElementSibling.classList.add('open')
}
dropdown.forEach(element => {
element.addEventListener('click', handleClick);
});
body {
background: #ccc;
}
.menu {
background: #fff;
margin: 0 auto;
max-width: 400px;
}
.menu ul {
padding: 0;
text-align: center;
width: 100%;
}
.menu ul li {
list-style: none;
padding: 20px 0;
border-bottom: 1px solid #ccc;
}
.menu ul li a {
text-decoration: none;
}
.menu ul li .dropdown {
display: none;
padding: 20px;
background: grey;
}
.menu ul li .dropdown.open {
display: block;
}
<div class="menu">
<ul>
<li>
link 1
<div class="dropdown">Some text</div>
</li>
<li>
link 2
<div class="dropdown">Some text</div>
</li>
<li>
link 3
<div class="dropdown">Some text</div>
</li>
<li>
link 4
<div class="dropdown">Some text</div>
</li>
<li>
link 5
<div class="dropdown">Some text</div>
</li>
</ul>
</div>

There's no need to check whether the current element is active; On the click handler you simply want to check whether the .nextElementSibling's .classList contains the class open. If it does, remove it. If it doesn't, apply it.
This can be seen in the following:
let dropdown = document.querySelectorAll('.dropdown-toggle');
const handleClick = (e) => {
if (e.currentTarget.nextElementSibling.classList.contains('open')) {
e.currentTarget.nextElementSibling.classList.remove('open');
} else {
e.currentTarget.nextElementSibling.classList.add('open')
}
}
dropdown.forEach(element => {
element.addEventListener('click', handleClick);
});
body {
background: #ccc;
}
.menu {
background: #fff;
margin: 0 auto;
max-width: 400px;
}
.menu ul {
padding: 0;
text-align: center;
width: 100%;
}
.menu ul li {
list-style: none;
padding: 20px 0;
border-bottom: 1px solid #ccc;
}
.menu ul li a {
text-decoration: none;
}
.menu ul li .dropdown {
display: none;
padding: 20px;
background: grey;
}
.menu ul li .dropdown.open {
display: block;
}
<div class="menu">
<ul>
<li>
link 1
<div class="dropdown">Some text</div>
</li>
<li>
link 2
<div class="dropdown">Some text</div>
</li>
<li>
link 3
<div class="dropdown">Some text</div>
</li>
<li>
link 4
<div class="dropdown">Some text</div>
</li>
<li>
link 5
<div class="dropdown">Some text</div>
</li>
</ul>
</div>

Inside your click handler, loop the document.querySelectorAll('.dropdown-toggle'), remove all the open from classlist, then add open to the current target

Trying to create a dropdown menu inside a table that stays after first click

I have this menu inserted into a table and i want that after i click a cell from a table appears the second menu hidden but everytime i click the second menu appears and disapears.
I want that everytime i click "menu1" or "menu" shows the option inside of the "second nav" that is inside the "menu1" or "menu2". Also when it shows i want them to stay there and when i click again it disapears. See snippet to better understand what im trying to accomplish.
$(".menu1").on('click',function () {
$(".second nav").$('li div ul').toggle('');
});
$('.nav > li div ul li a').click(function(e) {
e.stopPropagation();
});
// menu 2
$(".menu2").on('click',function () {
$('.nav').$('li div ul').toggle('');
});
$('.nav > li div ul li a').click(function(e) {
e.stopPropagation();
});
// menu 3
$(".menu3").on('click',function () {
$(".nav").$('li div ul').toggle('');
});
$('.nav > li div ul li a').click(function(e) {
e.stopPropagation();
});
// menu 4
$(".menu4").on('click',function () {
$(".nav").$('li div ul').toggle('');
});
$('.nav > li div ul li a').click(function(e) {
e.stopPropagation();
});
// menu 5
$(".menu5").on('click',function () {
$(".nav").$('li div ul').toggle('');
});
$('.nav > li div ul li a').click(function(e) {
e.stopPropagation();
});
tr{
color: black;
}
* { margin:0;
padding:0;
}
h1{
color:Black;
}
.close{display:none;}
li.menu1{
background-color: orange;
}
li.menu2{
background-color: orange;
}
li.menu3{
background-color: orange;
}
li.menu4{
background-color: orange;
}
li.menu5{
background-color: orange;
}
/* Första boxarna*/
ul.nav {
list-style: none;
display: block;
width: 100%;
position: relative;
z-index:0;
color: orange;
-webkit-background-size: 50% 100%;
display: list-item;
font-family: OpenSans-Regular;
font-size: 18px;
}
li {
margin: 5px 0 0 0;
}
ul.nav li a {
-webkit-transition: all 0.3s ease-out;
color: white;
padding: 7px 15px 7px 15px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 5px;
display: block;
text-decoration: none;
-webkit-box-shadow: 2px 2px 4px 2px #888;
}
ul.nav li a:hover {
color: #67a5cd;
padding: 9px 15px 7px 30px;
}
ul.nav li ul {
display:none;
}
ul.nav li:active ul {
display:block;
position:relative;
left:3px;
top:0px;
list-style: none;
z-index:999;
background: orange;
}
ul.nav li ul li
{
background:orange;
opacity: 0.5;
}
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<h1 strong>Plataforma de Alocações</h1>
<link rel="stylesheet" href="CSS/menu.css">
<body>
<table width="200px" border="0" align="left" cellpadding="10" cellspacing="5">
<tr>
<td>Sociedade Construções Manuel Moreira Maia LDA</td>
</tr>
<!--menu 1 -->
<tr>
<td>
<ul class="nav">
<li class="menu1">Alocações
<div class="second nav">
<ul>
<li>Nova Alocação</li>
<li>Listar Alocações</li>
</ul></div></li>
</ul>
</td>
</tr>
<!--menu 2 -->
<tr>
<td>
<ul class="nav">
<li class="menu2">Projetos
<div class="second nav">
<ul>
<li>Listar Projetos</li>
</ul></div></li>
</ul>
</td>
</tr>
<!--menu 3 -->
<tr>
<td>
<ul class="nav">
<li class="menu3">Colaborador
<div class="second nav">
<ul>
<li>Adicionar Colaborador</li>
<li>Listar Colaboradores</li>
</ul></div></li>
</ul>
</td>
</tr>
<!--menu 4 -->
<tr>
<td>
<ul class="nav">
<li class="menu4">Meios de Transporte
<div class="second nav">
<ul>
<li>Adicionar veículo</li>
<li>Listar Veículos</li>
</ul></div></li>
</ul>
</td>
</tr>
<!--menu 5 -->
<tr>
<td>
<ul class="nav">
<li class="menu5">Prestadores de Serviçoes
<div class="second nav">
<ul>
<li>Adicionar Novo Prestador</li>
<li>Listar Prestador de Serviços</li>
</ul></div></li>
</ul>
</td>
</tr>
</table>
<script src="JS/jquery-3.3.1.js"></script>
<script src="JS/menu.js"></script>
</body>
</html>

In your javascript code, the class selector is not correct:
$(".second nav").$('li div ul').toggle('');
must be
$(".second.nav").$('li div ul').toggle('');
since the "nav" is a second class of the tag, not the "nav" html component
I created a fiddle with a working example: https://jsfiddle.net/o2gxgz9r/52977/

jQuery .hover() or .mouseleave() not working on chrome

Problem description:
In my menu when .mouseenter() the menu opens and when .mouseleave() it closes, but if i click a lot , the .mouseleave() event is executed.
This only happened on chrome browser.
I have other .click() events inside my menu, but every click I made, the .mouseleave() event is execute.
$(document).ready(function() {
$("#nav1 li").hover(
function() {
$(this).find('ul').slideDown();
},
function() {
$(this).find('ul').slideUp();
});
});
#nav1 a {
color: #FFFFFF;
}
#nav1 li ul li a:hover {
background-color: #394963;
}
div ul li ul {
background-color: #4a5b78;
list-style: none
}
#nav1 > li > a {
padding: 16px 18px;
display: block;
border-bottom: 2px solid #212121;
}
#nav1 li ul li a {
padding: 10px 0;
}
div {
background-color: #000000;
background-color: #343434;
width: 280px;
}
/* Hide Dropdowns by Default */
#nav1 li ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<ul id="nav1">
<li>Hover here and infinite click
<ul>
<li>Stage1</li>
<li>Stage2</li>
<li>Stage3</li>
<li>Stage4</li>
</ul>
</li>
<li>Menu Heading 2
<ul>
<li>Stage1</li>
<li>Stage2</li>
<li>Stage3</li>
<li>Stage4</li>
</ul>
</li>
</ul>
<div>
Try click "Hover here and infinite click" to see this problem.
EDIT:
As you guys said, the problem occurs in this example.
Here is a video: Video link

When you click many times the browser has lost the element reference, try this example:
<div id="container">
<ul id="nav1">
<li>Menu Heading 1
<ul>
<li>Stage1</li>
<li>Stage2</li>
<li>Stage3</li>
<li>Stage4</li>
</ul>
</li>
<li>Menu Heading 2
<ul>
<li>Stage1</li>
<li>Stage2</li>
<li>Stage3</li>
<li>Stage4</li>
</ul>
</li>
<li>Menu Heading 3
<ul>
<li>Stage1</li>
<li>Stage2</li>
<li>Stage3</li>
<li>Stage4</li>
</ul>
</li>
</ul>
<div>
Css
ul,
li,
a {
padding: 0px;
margin: 0px;
}
.show {
display: block !important;
}
#nav1 a {
color: #FFFFFF;
}
#nav1 li ul li a:hover {
background-color: #394963;
}
div ul li ul {
background-color: #4a5b78;
list-style: none
}
#nav1 > li > a {
background-color: #343434;
padding: 16px 18px;
text-decoration: none;
display: block;
border-bottom: 2px solid #212121;
background: linear-gradient(top, #343434, #111111);
}
#nav1 li ul li a {
padding: 10px 0;
padding-left: 30px;
text-decoration: none;
display: block;
}
div {
background-color: #000000;
background-color: #343434;
width: 280px;
}
/* Hide Dropdowns by Default */
#nav1 li ul {
display: none;
}
JS
$(document).ready(function() {
$("#nav1 li").hover(
function(e) {
let ulMenu = $(this).find('ul');
ulMenu.addClass('show');
//$(this).find('ul').slideDown();
},
function(e) {
if(e.relatedTarget){
let ulMenu = $(this).find('ul');
ulMenu.removeClass('show');
} else {
console.log('fail ');
}
//$(this).find('ul').slideUp();
});
});
Codepen Example Works

You can add a stropPropagation in your click event.
$("#nav1 li").click(
function(e){
e.stopPropagation();
});
maybe the event is getting lost in the process, try to verify it, and if so set the actual element.
see this: https://api.jquery.com/event.relatedTarget/

Getting the parent DIV ID of the clicked UL LI select box

It seems my apparent attempts at mastering the jQuery language have failed me.
I am attempting to try and get the DIV id of the UL LI select box but my alert box comes back "undefined", thus I am looking for expert help.
Here is the markup and code in question:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.3.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {
font-family: Segoe UI;
font-size: 9pt;
}
.select {
background: url(arrow.png) no-repeat scroll right top;
border: 1px solid rgb(170,170,170);
width: 180px;
padding: 3px;
}
.select:hover {
cursor: pointer;
}
.select ul {
list-style-type: none;
margin: 0;
padding: 0;
cursor: pointer;
}
.select ul li {
display: none;
padding: 1px;
}
</style>
<script type="text/javascript">
window.onload = function() {
$(".select").click(function () {
$(this).find('ul li').toggle();
});
$(".select ul li").click(function(e) {
$(this).closest('div.select').text($(this).html());
//alert($(this).closest('div.select').attr("id"))
//alert($(this).closest('[id]').attr('id'))
//alert($(this).closest('div.select').attr('id'))
});
}
</script>
</head>
<body>
<div class="select" id="numbers">Select Box1
<ul>
<li>1234</li>
<li>5678</li>
<li>0123</li>
</ul>
</div>
<br><br>
<div class="select" id="letters">Select Box2
<ul>
<li>abcd</li>
<li>efgh</li>
<li>ijkl</li>
</ul>
</div>
<br><br>
<div class="select" id="fruits">Select Box3
<ul>
<li>apples</li>
<li>bananas</li>
<li>oranges</li>
</ul>
</div>
</body>
</html>

.text($(this).html() this line messes with the DOM, and cause problems with traversal. I advice you uses other ways to accomplish the text change. Like
$(this).closest("div").contents().first().replaceWith($(this).text());
$(".select ul li").click(function(e) {
$(this).closest("div").contents().first().replaceWith($(this).text());
var id = $(this).closest('[id]').attr('id');
alert(id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select" id="numbers">Select Box1
<ul>
<li>1234</li>
<li>5678</li>
<li>0123</li>
</ul>
</div>

$(".select ul li").click(function(e) {
$(this).closest('div.select').text($(this).html());
//alert($(this).closest('div.select').attr("id"))
//alert($(this).closest('[id]').attr('id'))
//alert($(this).closest('div.select').attr('id'))
});
Ok, what I'm 99% sure is happening is due to you detaching the element. Your setting the text() of the div.select, which is the parent of your select. That is effectively removing the li element you clicked as a child. So later when you try to do a closest it will not return anything as it's no longer a child. You will most likely need to store that information before you change the text so you have the value without having to look it up afterwards.
$(".select ul li").click(function(e) {
var $parent = $(this).closest('div.select');
$parent.text($(this).html());
alert($parent.attr('id'));
});

How to create a dynamic drop down?

Here is my HTML code.
<dl id="sample" class="dropdown">
<dt></dt>
<dd>
<ul>
<li>News</li>
<li>Jobs</li>
<li>Community</li>
<li>Events</li>
<li>Advisory</li>
<li>People</li>
<li>Universities</li>
<li>HR Intellegence</li>
<li>Companies</li>
<li>Inbox</li>
<li>Notifications</li>
</ul>
</dd>
And this is js
$(document).ready(function() {
$(".dropdown img.flag").addClass("flagvisibility");
$(".dropdown dt a").click(function() {
$(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});
$("#flagSwitcher").click(function() {
$(".dropdown img.flag").toggleClass("flagvisibility");
});
});
This is a code for a drop down list that populates on click. I want to repeat it 100 times on my webpage and I don't want to copy the code and change the Class Name or ID for each entry. I remember there is some '.this' type function to do this but I don't know how to use it. Also I have some dynamic posts which contain this list so its JS can't be repeated on every single new entry.
Please suggest such changes in this code which will allow me to use '.dropdown' class with every entry without repeating the JS code and it opens only that drop down which is clicked to open.

I made something for you:
<!DOCTYPE html>
<html>
<head>
<style>
html {
font-family: sans-serif;
}
.dropdown {
display: inline-block;
}
.dropdown dd {
display: none;
box-shadow: 0px 0px 2px 0px #555;
width: 180px;
position: absolute;
margin-left: 1px;
margin-top: 1px;
background-color: #FFF;
}
.dropdown ul {
list-style: none;
padding-left: 0px;
}
dt a {
display: inline-block;
background-color: #1b8be0;
padding: 10px;
color: #FFF;
text-decoration: none;
}
.dropdown li a{
text-decoration: none;
color: #333;
}
.dropdown li {
padding: 6px;
cursor: pointer;
}
.dropdown li:hover{
background-color: #EEE;
padding: 6px;
}
</style>
</head>
<body>
<dl id="sample" class="dropdown">
<dt>Menu</dt>
<dd>
<ul>
<li>News</li>
<li>Jobs</li>
<li>Community</li>
</ul>
</dd>
</dl>
<dl id="sample-2" class="dropdown">
<dt>Menu 2</dt>
<dd>
<ul>
<li>More News</li>
<li>More Jobs</li>
<li>More Community</li>
</ul>
</dd>
</dl>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(".dropdown dt a").click(function(e){
$(this).parent().next().fadeToggle("fast");
});
$(".dropdown dt a").blur(function(e){
if ($(e.target).not(".dropdown ul")){
$(".dropdown dd").fadeOut();
}
});
</script>
</body>
</html>

Its better for you to use a front-end framework like Twitter Bootstrap or Zurb Foundation.