Удалить двойной щелчок по раскрывающейся ссылке

Question

Я не очень хорошо осведомлен в javascript. Но мне нужно выпадающее меню для вертикального меню, которое является чистым javascript, поэтому я скопировал / вставил скрипт из W3: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_dropdown

и изменил его, чтобы он соответствовал стилю страницы. Это меню должно быть на нескольких страницах, поэтому оно также включает html. Я получил несколько работать, но вы должны дважды щелкнуть раскрывающийся список, чтобы закрыть его, и это должен быть один щелчок. Я искал решение уже пару недель и до сих пор не уверен, что делаю не так. Я не могу использовать jquery, bootstrap или любую внешнюю библиотеку, так как она не подключена к inte rnet.

HTML:

<div id="content"> 
<div class="topvert"> 
<div class="vertheader"> 
<span class="quicklinks">QUICK MENU LIST</span> 
</div>

<div class="vertbtn"> 
<div class="quick"> 
<a href="#">Menu Item</a>
</div>
<div class="quick"> 
<div class="drop-button active"><div onclick="myButton()">Drop down Menu Item 
</div></div>
<div class="dropdown-container" style="display: block;">
<a href="#">Menu Item</a>
</div>
</div>
</div>       
</div>   
<div class="btmvert"> 
<div class="vertheader"> 
<span class="quicklinks">2ND HALF (HEADLINE) QUICK MENU</span> 
</div>       
<div class="vertbtn">

<div class="quick"> 
<a href="#">Menu Item</a>
</div>
<div class="vertbtn"> 
<a class="backhome" href="#">Back to Home Page</a>
</div>           
</div>       
</div>   
</div>

Codepen

Answer 1

Проблема в том, что в вашем .drop-button элементе у вас есть встроенный атрибут onClick() / событие И внутри функции-обработчика (функция myButton ()) вы объявляете другой EventListener поверх этого.

Вы должны просто удалить атрибут onclick="myButton()" все вместе, и тогда ваш JavaScript будет выглядеть так:

(фрагмент кода запуска)

Есть несколько различных способов JavaScript для объявления прослушивателей событий. Один из способов - встроенные / HTML обработчики событий, которые вы помещаете встроенными в элемент HTML как атрибут, ie - <div onClick="handlerFunction"> Но более современный и более рекомендуемый способ - использовать addEventListener() непосредственно из вашего JavaScript.

var dropdown = document.querySelector(".drop-button");

dropdown.addEventListener("click", function() {
  this.classList.toggle("active");
   var dropdownContent = this.nextElementSibling;
   if (dropdownContent.style.display == "block") {
      dropdownContent.style.display = "none";
   } else {
      dropdownContent.style.display= "block";
   }
});

#content {
  margin: 1.875em 0px 0.625em 0px;
  width: auto;
  background-color: #002f6c;
  border-radius: 0.75em;
  -webkit-border-radius: 0.75em;
  -moz-border-radius: 0.75em;
  display: inline-block;
  overflow: hidden;
	top: 9.375em;
}

.quick {
    margin: 0;
    padding: 0;
    display: block;
    overflow: hidden;
    font-family: sans-serif;
}

.quick a {
    display: block;
    height: auto;
    padding-top: 0.625em;
    padding-bottom: 0.625em;
    font-family: sans-serif;
    font-size: calc(0.5vw + 0.5vh + 0.5vmin);
    text-align: center;
    text-decoration: none;
    background-color: #888B8D;
}

.quick a:hover {
    display: block;
    width: auto;
    height: auto;
    color: #002F6C;
    background-color: #FFD300;
}

.topvert {
  width: auto;
  margin: 0 auto;
  display: block;
  overflow: hidden;
}

.btmvert {
	width: auto;
  margin: 0 auto;
  display: block;
  overflow: hidden;
}

.btmverthome {
	width: auto;
  margin: 0 auto;
  display: block;
  overflow: hidden;
}

.vertheader {
	width: auto;
  padding: 2%;
  display: block;
  text-align: center;
}

.vertbtn {
	width: auto;
  cursor: pointer;
  display: block;
}

.vertbtn :hover {
  background-color: #FFD300;
  position: relative;
  display: block;
}

a.backhome {
  font-family: sans-serif;
	font-size: calc(0.5vw + 0.5vh + 0.5vmin);
	font-weight: 600;
	color: #fff;
	text-align: center;
	padding: 2%;
  box-sizing: border-box;
}

a.backhome:hover {
	color: #002f6c;
	background-color: #FFD300;
	position: relative;
	display: block;
}

.quicklinks {
  color: #fff;
  font-family: sans-serif;
  font-size: calc(0.5vw + 0.5vh + 0.5vmin);
  font-weight: 600;
}

.drop-button {
  padding-top: 0.625em;
  padding-bottom: 0.625em;
  text-decoration: none;
  font-family: sans-serif;
  font-size: calc(0.5vw + 0.5vh + 0.5vmin);
  color: #fff;
  display: block;
  border: none;
  background-color: #888B8D;
  width: 100%;
  text-align: center;
  cursor: pointer;
  outline: none;
}

/* On mouse-over */
.drop-button:hover {
  color: #002f6c;
  background-color: #FFD300;
}


.main {
  margin-left: 200px;
  font-size: 20px;
  padding: 0px 10px;
}


.active {
  background-color: #06a7e0;
  color: white;
}

.dropdown-container {
  display: none;
  background-color: #b4e4f5;
  border-bottom: solid 2px #06a7e0;
}

.dropdown-container > a {
	background-color: #50c1e9;
	border-bottom: solid 1px #06a7e0;
}

a { 
    display: block;
    position: relative;
    color: #f3f3f3;
    text-decoration: none;
  }
  
a:hover { 
    color: #fff;
    position: relative;
  }

<div id="content"> 
	<div class="topvert"> 
		<div class="vertheader"> 
			<span class="quicklinks">QUICK MENU LIST</span> 
		</div>		 
		<div class="vertbtn"> 
			<div class="quick">	
				<a href="#">Menu Item</a>
			</div>
			<div class="quick">	
				<div class="drop-button active"><div>Drop down Menu Item 
  		</div></div>
  				<div class="dropdown-container" style="display: block;">
    			<a href="#">Menu Item</a>
  				</div>
			</div>
		</div>		 
	</div>	 
	<div class="btmvert"> 
		<div class="vertheader"> 
			<span class="quicklinks">2ND HALF (HEADLINE) QUICK MENU</span> 
		</div>		 
		<div class="vertbtn">
			
			<div class="quick">	
				<a href="#">Menu Item</a>
			</div>
			<div class="vertbtn"> 
				<a class="backhome" href="#">Back to Home Page</a>
			</div>			 
		</div>		 
	</div>	 
</div>