We Keep Coding

How to make the dropdown menu collapse when not in use

So I have a dropdown menu and when I click it it works but when I click out it stays open. I've tried using mouseout mousedown onclick ondblclick etc but none of them work. Please help :(
[What I've tried][1]

Attach click listener to your document, if clicked element is img then display dropwdown else hide.
const menu = document.querySelector('#dropdown');
document.addEventListener('click', function(e) {
menu.classList.toggle('show', e.target.tagName == "IMG");
});
.menu {
float: right;
margin: 24px;
position: relative;
display: inline-block;
}
.menu img {
cursor: pointer;
}
.dropdown {
position: absolute;
z-index: 1;
float: right;
width: 150px;
background-color: lightgray;
top: 73px;
right: -24px;
display: none;
}
.dropdown a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
color: #B00D93;
font-weight: bold;
}
.show {
display: block;
}
<div class="menu" id="menu">
<img src="https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2018/06/Screen-Shot-2018-06-13-at-8.07.34-PM.png" id="dropdownImg" alt="" width="45px" height="45px">
<div class="dropdown" id="dropdown">
Home
About Us
Services
Feedback
</div>
</div>

check this : https://jsfiddle.net/85yz7asd/
showHide = () => {
var dropdown = document.getElementById("dropdown")
dropdown.style.display == "block" ? dropdown.style.display = "none" : dropdown.style.display = "block"
}

This is a Pure HTML and CSS example:
HTML
<div class="dropdown">
<div class="dropdown-btn">Hover Me</div>
<ul class="dropdown-list">
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
</ul>
</div>
CSS
.dropdown {
display: block;
position: absolute;
}
.dropdown-btn {
text-align: center;
background-color: black;
color: white;
display: block;
position: absolute;
width: 200px;
height: auto;
padding: 10px;
font-size: 16px;
cursor: pointer;
}
.dropdown-list {
position: relative;
display: none;
width: 200px;
height: auto;
list-style: none;
margin-top: 40px;
padding: 0;
}
.dropdown-list li a {
text-align: center;
text-decoration: none;
display: block;
padding: 10px;
width: 200px;
background-color: black;
color: white;
margin-top: 5px;
}
.dropdown-list li a:hover {
background-color: grey;
color: white;
}
.dropdown:hover .dropdown-list {
display: block;
}
working js fiddle

If you want to use your current code, try this.
Clicking on the dropdownImg element will open the menu.
Clicking anywhere else will close the menu.
https://jsfiddle.net/t6wpgjrd/
document.onclick = function(e) {
if(e.target.id === "dropdownImg") {
show();
}
else{
hide();
}
}
And don't forget to remove the onclick and onblur attributes from your dropdownImg element.

Absolute element on the top of relative element hover and on-click problem

I am having a problem with an absolute element. This element is the floating-count which is on the top of the navigation.
Problem is when I hover my mouse on floating-count element, the drop-down arrow also is hovering (it should suppose to hover or change color when the navigation hovers). Then when I am clicking the floating-count element the drop-down navigation also showing (it should suppose to show when the navigation was clicked).
I tried changing (playing with it as I expect to see the solution) and adding z-index to the elements but I am confused with it.
Code here:
$('.mnav').on('click', function() {
if ($(this).children('.dpdown').is(":hidden")) {
console.log('show');
$(this).children('.dpdown').slideDown("fast");
} else {
$(this).children('.dpdown').slideUp("fast");
console.log('hide');
}
});
li.mnav,
.navigation ul.right li.mnav {
display: inline-block;
position: relative;
}
a.text-link,
.navigation ul.right li.mnav a.text-link {
color: #fff;
font-size: 15px;
line-height: 15px;
padding: 14px 24px;
display: block;
text-decoration: none;
text-transform: uppercase;
}
.nav-arrow {
background: yellow;
}
.nav-arrow:after {
top: 40%;
right: 0;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: #1b6b00;
border-width: 8px;
}
.floating-count {
position: absolute;
z-index: 1;
border-radius: 20px;
background: red;
padding: 4px 8px;
top: -12px;
right: -2px;
text-decoration: none;
color: #FFF;
}
.dpdown {
position: absolute;
left: 0;
top: 50px;
width: 300px;
display: none;
z-index: 1;
}
.dpdown ul li a {
font-size: 12px;
color: #eaf2ac;
padding: 5px 30px;
display: block;
text-decoration: none;
text-transform: uppercase;
}
.dpdown ul {
list-style-type: none;
background-color: #1b6b00;
text-align: left;
margin: 0;
padding: 4px 0;
}
ul.right {
list-style-type: none;
background-color: #208100;
text-align: center;
margin: 0;
padding: 0;
float: left;
border-radius: 5px;
}
ul.right li.mnav:hover,
.navigation ul.right li.mnav a.text-link:hover {
color: #ffea00;
}
.dpdown:hover>.nav-arrow:after {
color: #ffea00;
}
.navigation .mnav:hover>.nav-arrow:after {
border-top-color: #ffea00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigation">
<ul class="right">
<li class="mnav">
Drop Down<span class="nav-arrow"></span>
<span class="floating-count-wrap"><a class="floating-count" href="/#count">2</a></span>
<div class="dpdown">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</div>
</li>
</ul>
</div>
Try it in jsfiddle:

You have the hover style based on .mnav and the js dropdown triggered by .mnav but .floating-count-wrap is a child of .mnav so it is triggering those events.
I adjusted the css and js to use .mnav .test-link as the selector. I also had to make the css rule use sibling and not parent selection. Similarily, in the js, the selector for the dropdown is no longer a child of $(this) so I updated that to $(this).parent()
updated js fiddle
js
$('.mnav .text-link').on('click', function() { ... });
css
.navigation .mnav .text-link:hover + .nav-arrow:after { ... }

dynamic html element issue

when one of menus is chosen and option in select tag, apply button can be worked to be placed to be dynamic html element in Panel below. when a user clicks cancel button, that dynamic html element will be deleted.
As for an issue, when a user chooses one menu, dynamic html element will be redundantly placed to be in panels.
For example,
apply menu 2 > create dynamic html element in panel of menu2 > cancel menu 2 > apply menu other menu (3 or 1) > redundantly create dynamic html elements in previous panel of menu 2 and current panel of menu.
How am I able to completely delete dynamic html element when I click cancel button??
$(function() {
$(".section4 ul li:first-child").addClass("on");
//section4 ul li on
$("section.section4 ul li").click(function() {
$(this).addClass("on");
$("section.section4 ul li.on").not(this).removeClass("on");
});
// panel
$(".PaNel").hide();
$(".PaNel:eq(0)").show();
//addEventListner
$(".section4 ul li").click(function() {
$(".PaNel").hide();
$("#tab" + ($(this).index() + 1)).show();
});
//메뉴 선택
$(".section2").find("article").click(function() {
$(this).addClass("On");
$("article.On").not(this).removeClass("On");
});
//비활성신청
$(".btn2").css({
"display": "none"
});
//상단 메뉴
$("article").click(function() {
if ($(this).hasClass("On") && $("#menuSelect option:selected").index() > 0) {
$(".btn1").css({
"background": "red"
});
//$(".btn2").css({"display":"block"});
} else {
$(".btn1").css({
"display": "block"
});
$(".btn2").css({
"display": "none"
});
}
});
// while article is clicked, menuSelect.index() > 0
$("body").click(function() {
if ($("article").hasClass("On")) {
if ($("#menuSelect option:selected").index() > 0) {
$(".btn1").css({
"display": "none"
});
$(".btn2").css({
"display": "block"
});
}
}
})
$(".area_popup").addClass("none")
$(".end").addClass("none");
$(".section2").children("article").one("click", function() {
console.log($(this).index())
var target = $("#tab" + $(this).index())
$("#Apply").click(function() {
var menuSelect = document.getElementById("menuSelect");
//console.log(menuSelect);
switch (menuSelect.value) {
case "a":
case "b":
case "c":
case "d":
target.find(".Apply_Check").append("<div class='User'>" + menuSelect.value + "</div>");
break;
}
$(".end").removeClass("none");
$("#Apply").addClass("none");
//alert("신청 완료 되었습니다")
})
})
$(document).on("click", '.end', function() {
//본인꺼만
$(".User").remove();
$(".end").addClass("none");
$("#Apply").removeClass("none");
});
$("article").click(function() {
if (parseInt($(this).find("span").text()) == 0) {
//$(".button").css({"display":"none"});
//$(".btn1,.btn2, .end").css({"display":"none"})
//$(".btn4").css({"display":"block"});
$(".area_popup3").css({
"display": "block"
});
} else {
//$(".button").css({"display":"block"});
//$(".btn4").css({"display":"none"});
}
});
//메뉴 하$(단 클릭시 섹션 2 남은 수량이 없는 경우
$(".section4 ul").children("li").click(function() {
var article = $('article:eq(' + $(this).index() + ')')
if (parseInt(article.find("span").text()) == 0) {
$(".area_popup3").css({
"display": "block"
});
}
})
$("body").click(function(e) {
if ($("#menuSelect option:selected").index() == 0) {
$(".btn1").css({
"display": "block"
});
$(".btn2").css({
"display": "none"
});
}
})
});
function fn_popup_close(name) {
//$('body').removeClass('fixed');
//body class removeClass
$('.' + name).hide();
}
function fn_popup_open(name) {
//$('body').addClass('fixed');
$('.' + name).show();
}
/*//////////////////reset//////////////////////////////////////*/
* {
margin: 0;
padding: 0;
}
body,
header,
footer,
section,
nav,
article,
figure,
aside,
details,
main {
margin: 0;
padding: 0;
}
header,
footer,
section,
nav,
article,
figure,
aside,
details,
main {
display: block;
}
a:link,
a:visited {
color: #000;
text-decoration: none;
}
/*a:hover, a:focus{color:#aaa; text-decoration:none;}*/
body {
color: #333;
}
li {
list-style: none;
}
input[type="button"] {
cursor: pointer;
}
input[type=button],
select {
border-radius: 0;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
/*//////////////////reset//////////////////////////////////////*/
#wrap {
max-width: 100%;
margin: 0 auto;
}
/*//////////////section1/////////////////////////////////////*/
section.section1 {
width: 100%;
/*background:#F87141;*/
}
section.section1 .screen_info {
width: 100%;
overflow: hidden;
}
section.section1 .screen_info ul {
width: 300%;
overflow: hidden;
}
section.section1 .screen_info ul li {
width: 31.63%;
float: left;
padding: 10px 1% 10px .7%;
}
/*//////////////section2/////////////////////////////////////*/
section.section2 {
width: 100%;
overflow: hidden;
border: 1px solid #ccc;
border-width: 1px 0;
}
section.section2 h3 {
width: 100%;
height: 50px;
line-height: 50px;
border-bottom: 1px solid #ccc;
text-indent: 2%;
}
section.section2 article {
width: 31.33%;
padding-left: 2%;
height: 100px;
float: left;
}
section.section2 article div {
border-right: 1px solid #ccc;
}
.On {
background: #d4dbdd;
}
/*section.section2 article:last-child{border-right:none;}*/
section.section2 article h2 {
width: 100%;
height: 30px;
font-size: 14px;
line-height: 30px;
}
section.section2 article p.FoodName {
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
font-weight: 900;
font-size: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
section.section2 article p.FoodCnt {
width: 90%;
height: 30px;
line-height: 30px;
text-align: right;
font-size: 13px;
}
/*//////////////section2/////////////////////////////////////*/
/*//////////////section3/////////////////////////////////////*/
section.section3 {
width: 100%;
padding-top: 30px;
}
section.section3 .Select {
border-top: 1px solid #ccc;
position: relative;
}
.Select {
display: block;
content: "";
clear: both;
}
section.section3 .Select p.Selected {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
}
section.section3 .Select p {
font-weight: 900;
text-indent: 9%;
}
section.section3 .Select p.Selected span {
cursor: pointer;
position: absolute;
right: 20px;
top: 4px;
}
section.section3 .Select p.Selected span img {
width: 10px;
}
.selection {
border-bottom: 1px solid #ccc;
}
/*.on{background:#ccc;}*/
section.section3 select {
width: 100%;
height: 30px;
background: #ECEFF0;
border: 1px solid #ccc;
border-width: 1px 0;
}
select#menuSelect::-ms-expand {
display: none;
}
/*IE*/
select#menuSelect {
appearance: none;
-webkit-appearance: none;
/*for chrome*/
-moz-appearance: none;
/*for firefox*/
background: url(./images/next_shadow.png) no-repeat right;
background-position-x: 97%;
background-size: 14px 24px;
text-indent: 2%;
}
section.section3 p.Avail_time {
width: 95%;
text-align: right;
line-height: 30px;
height: 30px;
padding-right: 5%;
}
section.section3 p input[type=button] {
width: 100%;
border: 1px solid #ccc;
border-width: 1px 0;
background: #F87141;
height: 40px;
color: #fff;
}
section.section3 p.btn1 input[type=button] {
background: #aaa;
}
section.section3 p.end input[type=button] {
background: #aaa;
}
.none {
display: none;
}
/*//////////////section3/////////////////////////////////////*/
/*//////////////section4/////////////////////////////////////*/
section.section4 {
padding-top: 30px;
}
section.section4 ul {
width: 100%;
overflow: hidden;
border: 1px solid #ccc;
border-width: 1px 0;
}
section.section4 ul li {
width: 25%;
height: 30px;
line-height: 30px;
float: left;
font-weight: 900;
font-size: 13px;
text-align: center;
background: #fff;
}
section.section4 ul li a {
display: block;
border-right: 1px solid #ccc;
}
.on>a {
background: #aaa;
color: #fff;
}
section.section4 ul li:last-child a {
border: none;
}
section.section4 .memo {
width: 100%;
}
section.section4 .memo input {
width: 100%;
}
section.section4 article.PaNel {
width: 98%;
padding-left: 2%;
height: 400px;
}
.Apply_Check {
width: 100%;
}
.Apply_Check p.Count {
width: 100%;
height: 50px;
line-height: 50px;
font-weight: 900;
}
#tab4 {
padding: 10px;
}
#tab4 p {
padding-bottom: 20px;
}
/*//////////////dynamic HTML Element ////////////////////////////////////*/
.User {
width: 100%;
height: 50px;
background: #aaa;
}
/*//////////////dynamic HTML Element ////////////////////////////////////*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<section class="section2">
<h3>choose menu</h3>
<article>
<div>
<h2>menu 1.</h2>
</div>
</article>
<article class="scene_two">
<div>
<h2>menu 2.</h2>
</div>
</article>
<article class="scene_three">
<div>
<h2>menu 3.</h2>
</div>
</article>
</section>
<section class="section3">
<select id="menuSelect">
<option value="menu" selected="selected">choose one</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
<!--<div class="Select">
<p class="Selected" id="reasonSelect" onclick="result();">신청사유 선택<span><img src="./images/next_shadow.png" alt="arrow"/></span></p>
<div class="selection">
<p>외근/출장</p>
<p>당직</p>
<p>당직</p>
<p>기타</p>
</div>
</div>-->
<p class="btn1 button"><input type="button" value="apply" /></p>
<p class="btn2 button"><input type="button" value="apply" id="Apply" /></p>
<p class="end button"><input type="button" value="cancel" onclick="fn_popup_open('area_popup')" /></p>
<!--<p class="btn4 button"><input type="button" value="신청 마감" onclick="fn_popup_open('area_popup')"/></p>-->
<!--<select>
<option>dd</option>
<option>dd</option>
<option>dd</option>
<option>ddd</option>
</select>-->
</section>
</section>
<section class="section4">
<ul>
<li>menu1</li>
<li class="scene_two">menu2</li>
<li class="scene_three">menu3</li>
<li>info</li>
</ul>
<article class="PaNel" id="tab1">
<div class="Apply_Check">
<p class="Count">Panel <span id="ppl1">1</span></p>
</div>
</article>
<article class="PaNel" id="tab2">
<div class="Apply_Check">
<p class="Count">Panel <span id="ppl2">2</span></p>
</div>
</article>
<article class="PaNel" id="tab3">
<div class="Apply_Check">
<p class="Count">Panel <span id="ppl3">3</span></p>
</div>
</article>
<article class="PaNel" id="tab4">
information
</article>
</section>
</div>

You could use JQuery's empty command, it removes all child elements from the parent element
$("#parent").empty()

Toggling an element with JQuery makes part of the parent element dissapear

I'm trying to make a nav bar with jquery, fairly simple, clicking the nav icon brings up a menu on the side, however I need a sub-menu to appear after clicking one of the options, in this case the "equipment we sell" tab. I have no problem with that as I click the tab and it toggles the menu to being visible however, all of the tabs below it become invisible (I'm assuming they don't relocate to below the now visible element). Can someone explain to me why the tabs do not make room for the new list elements. Code below.
jscript
$('.icon-menu').click(function() {
$('.menu').animate({
right: '0px'
}, 200);
$('.equipsell').hide();
});
$('.menu-exit').click(function() {
$('.menu').animate({
right: '-285px'
}, 200);
$('.equipsell').hide();
});
$('.equipment').click(function() {
$('.equipsell').toggle();
});
HTML
<header>
<div class="menu">
<img src="img/menu-exit.png" class="menu-exit" alt="Exit Button">
<ul>
<li>Home</li>
<li>About</li>
<li class="equipment">Equipment We Sell</li>
<div class="equipsell">
<li>Audiometers by Inventis</li>
<li>Middle Ear Analyzers by Inventis</li>
<li>Delfino Video Otoscopes by Inventis</li>
<li>Daisy by Inventis</li>
<li>Trumpet REM by Inventis</li>
</div>
<li>Contact Us</li>
</ul>
</div>
<div class="main-menu">
<p>Test<br>Website</p>
<img src="img/bars.jpg" class="icon-menu" alt="Menu">
</div>
</header>
So when you click the equipment class/list item from above it lowers down the "menu" class but covers up the contact us list item.
EDIT
Forgot to include css.
CSS
/***** NAV *****/
header {
background-color: #093;
padding-bottom: 5px;
}
header p {
display: inline-block;
font-size: 1.35em;
margin: 10px 0 5px 15px;
font-weight: bold;
padding: 2px;
border: 3px solid black;
}
header a {
color: black;
}
.icon-menu {
width: 35px;
height: 35px;
float: right;
margin: 20px 15px 0 0;
display: inline-block;
}
.menu {
background: #00882B;
right: -285px;
height: 100%;
position: fixed;
width: 285px;
}
.menu-exit {
width: 35px;
height: 35px;
margin-left: 48%;
}
.menu ul {
border-top: 1px solid #636363;
list-style: none;
text-align: center;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #636363;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
color: #000000;
font-size: 15px;
font-weight: 800;
text-transform: uppercase;
}
.menu a {
color: #000000;
font-size: 15px;
font-weight: 800;
text-decoration: none;
text-transform: uppercase;
}
.active-menu{
position: absolute;
}
.equipsell{
width: 285px;
position: fixed;
}
.equipsell li {
margin: 0;
padding: 0;
line-height: 2.5;
background-color: #c90;
}
.equipsell a{
color: white;
padding: 0;
margin: 0;
}
.bottom-half li {
background-color: #00882B;
}
/***************/

Your class .equipsell is defining the position to be fixed, which causes is to be placed a layer above the other elements.
I guess the code to create the expected result would be:
.equipsell{
width: 285px;
}
JSFiddle updated: https://jsfiddle.net/rc8br5oe/
More about the CSS positions: http://www.w3schools.com/cssref/pr_class_position.asp

Don't allow both menus with same class to be open at the same time

I don't want the both menus to be able to be open at the same time. What I want: If one menu is open and you click the next one the first one will close. I include my jsfiddle so you can get a better understanding of what I am looking for, jQuery 2.1 is enabled.
Take a look here:
https://jsfiddle.net/blomberg/y0bxL2sL/1/
$(document).ready(function() {
$.fn.dropDown = function(hiddenClass) {
var that = this;
$('html').click(function() {
that.each(function() {
$(this).find('.smaller_ul_list').addClass(hiddenClass);
});
});
return this.each(function() {
var $this = $(this);
$this.data('desktop__menuTrigger', true);
$this.find('.smaller_ul_list').addClass(hiddenClass);
$this.click(function(e) {
$(this).find('.smaller_ul_list').toggleClass(hiddenClass);
e.stopPropagation();
if ($(e.target).parent().data('desktop__menuTrigger')) {
e.preventDefault();
}
});
});
}
$('.desktop__menu').dropDown('hidden');
});
.main-hamburger-menu {
display: block;
width: 28px;
float: left;
height: 100%;
margin-left: 14px;
}
/* DESKTOP MENU */
.hidden {
display: none
}
.desktop__menu {
.bigger_ul_list {
.smaller_ul_list {
width: 200px;
border: 2px solid gray;
border-bottom: none;
/* height: 350px; */
background: gray;
/* overflow-y: scroll; */
margin-top: -20px;
/* border-radius: 8px; */
li {
clear: both;
height: 47px;
border-bottom: 2px solid gray;
line-height: 47px;
letter-spacing: .3px;
padding-right: 15px;
text-transform: uppercase;
font-size: 15px;
font-weight: 700;
&: hover {
background: #fff;
}
}
li:first-child {
border-radius: 8px 8px 0 0;
}
img {
width: 30px;
}
a {
color: gray;
text-decoration: none;
li {
border-bottom: 2px solid gray;
line-height: 47px;
letter-spacing: .3px;
padding-right: 15px;
text-transform: uppercase;
font-size: 15px;
color: black;
&: hover {
background: #fff;
}
}
}
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="main-hamburger-menu">
<div class="desktop__menu">
<ul class="bigger_ul_list">
<li class="dropdown__desktop">Click me
<ul class="smaller_ul_list">
<li>test</li>
</ul>
</li>
</ul>
</div>
</div>
<br>
<br>
<br>
<div class="main-hamburger-menu">
<div class="desktop__menu">
<ul class="bigger_ul_list">
<li class="dropdown__desktop">Click me
<ul class="smaller_ul_list">
<li>test</li>
</ul>
</li>
</ul>
</div>
</div>

You can achieve this by hiding all other .smaller_ul_list elements when toggling the intended one. Try this:
$this.click(function(e) {
var $smallerUlList = $(this).find('.smaller_ul_list').toggleClass(hiddenClass);
$('.smaller_ul_list').not($smallerUlList).addClass(hiddenClass);
e.stopPropagation();
if ($(e.target).parent().data('desktop__menuTrigger')) {
e.preventDefault();
}
});
Updated fiddle