ShellRox
Reputation: 2602
Menu not showing up after using document click function event
I am currently creating multiple navigation buttons for my website, each of them would show up menus.
So as example, this is the first menu:
<div class="outer-bar">
<ul class="down-bar" style="list-style:hidden">
<li>
<label id="down-nav-1" class="down-nav" onclick="Dropdown1()">Knives <b class="caret_down">▼</b></label>
<div class="mainsizer">
<div class="dropdown-menus" id="dropdown-menu-1">
<a href=/?search=M9%20Bayonet&type=weapon class="Text1"><label class="m9_bayonet" style="width:30px;height:30px;position:absolute;top:5px;left:5px;cursor:pointer;"></label>M9 Bayonet</a>
<a href=/?search=Karambit&type=weapon class="Text1"><label class="karambit" style="width:30px;height:30px;position:absolute;left:5px;top:59px;cursor:pointer;"></label>Karambit</a>
<a href=/?search=Bayonet&type=weapon class="Text1"><label class="bayonet" style="width:30px;height:30px;position:absolute;left:5px;top:116px;cursor:pointer;"></label>Bayonet</a>
<a href=/?search=Butterfly%20Knife&type=weapon class="Text1"><label class="butterfly" style="width:30px;height:30px;position:absolute;left:5px;top:170px;cursor:pointer;"></label>Butterfly Knife</a>
<a href=/?search=Flip%20Knife&type=weapon class="Text1"><label class="flip" style="width:30px;height:30px;position:absolute;left:5px;top:225px;cursor:pointer;"></label>Flip Knife</a>
<a href=/?search=Falchion%20Knife&type=weapon class="Text1"><label class="falchion" style="width:30px;height:30px;position:absolute;left:5px;top:280px;cursor:pointer;"></label>Falchion Knife</a>
<a href=/?search=Gut%20Knife&type=weapon class="Text1"><label class="gut" style="width:30px;height:30px;position:absolute;left:5px;top:334.5px;cursor:pointer;"></label>Gut Knife</a>
<a href=/?search=Shadow%20Daggers&type=weapon class="Text1"><label class="shadow" style="width:30px;height:30px;position:absolute;left:5px;top:390px;cursor:pointer;"></label>Shadow Daggers</a>
<a href=/?search=Huntsman%20Knife&type=weapon class="Text1"><label class="huntsman" style="width:30px;height:30px;position:absolute;left:5px;top:444px;cursor:pointer;"></label>Huntsman Knife</a>
<a href=/?search=Bowie%20Knife&type=weapon class="Text1"><label class="bowie" style="width:30px;height:30px;position:absolute;left:5px;top:498.5px;cursor:pointer;"></label>Bowie Knife</a>
</div>
</div>
</li>
So as you see on the <label> element #down-nav-1, it has onclick attribute linked to the function Dropdown1() and Display of menu is None and the time.
And this is the function itself in Javascript:
function Dropdown1() {
document.getElementById("dropdown-menu-1").style.display = "inline-block";
document.getElementById("down-nav-1").style.cssText = "border: solid 3px gray;background-color: gray;border-radius: 10px;";
}
All of this would simply work fine, please see Fiddle. (Only "Knives" button works atm).
But then i tried to add a function, so when user clicks outside of the menu, the display would be set to 'None' again:
function Dropdown1() {
document.getElementById("dropdown-menu-1").style.display = "inline-block";
document.getElementById("down-nav-1").style.cssText = "border: solid 3px gray;background-color: gray;border-radius: 10px;";
}
$(document).click(function(event) {
if(!$(event.target).closest('#dropdown-menu-1').length) {
if ( ($('#dropdown-menu-1').style.display = "None" ) {
$('#dropdown-menu-1').style.display = "inline-block";
}
}
})
And after adding this code, there would be no action when clicking the button. ( see the result ).
I don't understand the specific problem in there, but please note, i am new to Javascript, and don't know many things in there.
What could the problem be? can i do this with pure Javascript or should i use jquery in this case?
Upvotes: 0
Views: 67
Answers (3)
nashcheez
Reputation: 5183
There is syntax & logical error in the code.
Updated your code:
function Dropdown1() {
if ($('#dropdown-menu-1').css("display") !== "none") {
$('#dropdown-menu-1').css("display", "none");
} else {
$('#dropdown-menu-1').css("display", "inline-block");
}
document.getElementById("down-nav-1").style.cssText = "border: solid 3px gray; background-color: gray; border-radius: 10px;";
}
$(document).click(function(event) {
if (!$(event.target).closest('.outer-bar').length) {
if ($('#dropdown-menu-1').css("display") !== "none") {
$('#dropdown-menu-1').css("display", "none");
}
}
});
Please use == or === instead of the = operator when comparing inside your if blocks.
Also brackets were not closed in the if block expressions.
Also, style.display is a property associated to a JavaScript object and not a jQuery object. You should use .css("display") for a jQuery object.
Updated working fiddle: https://jsfiddle.net/nashcheez/bjfz7twq/7/
Upvotes: 1
junkfoodjunkie
Reputation: 3178
Here's a minimal, working (although not styled completely) version, using no JS, and very basic HTML and CSS. Should work in any browser.
.nav {
display: block;
background-color: black;
height: 5em;
}
.nav a {
color: white;
}
.nav ul {
list-style-type: none;
}
.nav > ul > li {
display: inline-block;
}
.nav ul li > ul {
display: none;
}
.nav ul li:hover > ul {
display: block;
}
.down-nav {
font-size: 105%;
color: white;
font-family: 'Lato';
cursor: pointer;
transition: all 0.1s ease;
border: solid .2em transparent;
}
.down-nav:hover {
border: solid .2em gray;
background-color: gray;
border-radius: 1em;
font-family: 'Lato';
}<div class="nav">
<ul>
<li class="down-nav">Knives <span>▼</span>
<ul>
<li><a href="/?search=M9%20Bayonet&type=weapon">M9 Bayonet</a></li>
<li><a href="/?search=Karambit&type=weapon">Karambit</a></li>
<li><a href="/?search=Bayonet&type=weapon">Bayonet</a></li>
<li><a href="/?search=Butterfly%20Knife&type=weapon">Butterfly Knife</a></li>
<li><a href="/?search=Flip%20Knife&type=weapon">Flip Knife</a></li>
<li><a href="/?search=Falchion%20Knife&type=weapon">Falchion Knife</a></li>
<li><a href="/?search=Gut%20Knife&type=weapon">Gut Knife</a></li>
<li><a href="/?search=Shadow%20Daggers&type=weapon">Shadow Daggers</a></li>
<li><a href="/?search=Huntsman%20Knife&type=weapon">Huntsman Knife</a></li>
<li><a href="/?search=Bowie%20Knife&type=weapon">Bowie Knife</a></li>
</ul>
</li>
<li class="down-nav">Pistols <span>▼</span>
<ul>
<li><a href="/?search=Glock-18&type=weapon">Glock-18</a></li>
<li><a href="/?search=USP-S&type=weapon">USP-S</a></li>
<li><a href="/?search=P2000&type=weapon">P2000</a></li>
<li><a href="/?search=Five-Seven&type=weapon">Five-SeveN</a></li>
<li><a href="/?search=Desert%20Eagle&type=weapon">Desert Eagle</a></li>
<li><a href="/?search=Tec-9&type=weapon">Tec-9</a></li>
<li><a href="/?search=CZ75-Auto&type=weapon">CZ75-Auto</a></li>
<li><a href="/?search=P250&type=weapon">P250</a></li>
<li><a href="/?search=Dual%20Berettas&type=weapon">Dual Berettas</a></li>
<li><a href="/?search=R8%20Revolver&type=weapon">R8 Revolver</a></li>
</ul>
</li>
</ul>
</div>Upvotes: 1
Praveen Kumar Purushothaman
Reputation: 167172
If you are using jQuery, please use it consistently. Don't mix both jQuery and Vanilla JavaScript. To do something very simple dropdown like that, you just need to use JavaScript to only change classes and not the original effect. All the others should be handled by CSS.
Technically, this is achievable just using HTML and CSS. There are 1000s of examples outside. Also, you should use event handlers instead of functions for individual dropdowns, as it is better for scalability.
First thing, change this in CSS:
.mainsizer.open .dropdown-menus {
display: block;
}
And in your JavaScript, do this:
$(function () {
$("label").click(function () {
if ($(this).next(".mainsizer").hasClass("open"))
$(this).next(".mainsizer").toggleClass("open");
else {
$(".open").removeClass("open");
$(this).next(".mainsizer").addClass("open");
}
});
});
Ultimately, you should have this code:
$(function () {
$("label").click(function () {
if ($(this).next(".mainsizer").hasClass("open"))
$(this).next(".mainsizer").toggleClass("open");
else {
$(".open").removeClass("open");
$(this).next(".mainsizer").addClass("open");
}
});
});.outer-bar {
position: relative;
display: block;
z-index: 1;
text-align: center;
top: 55px;
background-color: black;
height: 60px;
width: 100%;
}
.down-bar {
list-style-type: none;
font-size: 105%;
}
.down-bar li {
display: inline-block;
margin-top: 15px;
margin-right: 2%;
vertical-align: top;
}
.down-nav {
z-index: 1
font-size: 105%;
color: white;
font-family: 'Lato';
cursor: pointer;
transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
}
.down-nav:hover {
color: white;
border: solid 3px gray;
background-color: gray;
border-radius: 10px;
font-family: 'Lato';
}
.down-nav li {
display: inline-block;
}
.caret_down {
font-size: 30%;
}
.mainsizer {
position: absolute;
width: 164px;
}
.dropdown-menus {
display: none;
position: absolute;
width: 164px;
right: 5%;
background-color: black;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 99;
transition: 0.1s ease-in;
margin-top: 5px;
}
.dropdown-menus a {
color: white;
text-align: center;
font-size: 0.9em;
padding: 8% 0px 15% 0%;
padding-right: 10%;
text-decoration: none;
display: block;
list-style-type: none;
white-space: nowrap;
margin-left: 0%;
text-indent: 4%;
font-family: 'Lato';
}
.dropdown-menus a:hover {
background-color: gray;
}
.mainsizer.open .dropdown-menus {
display: block;
}<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div class="outer-bar">
<ul class="down-bar" style="list-style:hidden">
<li>
<label id="down-nav-1" class="down-nav" onclick="Dropdown1()">Knives <b class="caret_down">▼</b></label>
<div class="mainsizer">
<div class="dropdown-menus" id="dropdown-menu-1">
<a href=/?search=M9%20Bayonet&type=weapon class="Text1"><label class="m9_bayonet" style="width:30px;height:30px;position:absolute;top:5px;left:5px;cursor:pointer;"></label>M9 Bayonet</a>
<a href=/?search=Karambit&type=weapon class="Text1"><label class="karambit" style="width:30px;height:30px;position:absolute;left:5px;top:59px;cursor:pointer;"></label>Karambit</a>
<a href=/?search=Bayonet&type=weapon class="Text1"><label class="bayonet" style="width:30px;height:30px;position:absolute;left:5px;top:116px;cursor:pointer;"></label>Bayonet</a>
<a href=/?search=Butterfly%20Knife&type=weapon class="Text1"><label class="butterfly" style="width:30px;height:30px;position:absolute;left:5px;top:170px;cursor:pointer;"></label>Butterfly Knife</a>
<a href=/?search=Flip%20Knife&type=weapon class="Text1"><label class="flip" style="width:30px;height:30px;position:absolute;left:5px;top:225px;cursor:pointer;"></label>Flip Knife</a>
<a href=/?search=Falchion%20Knife&type=weapon class="Text1"><label class="falchion" style="width:30px;height:30px;position:absolute;left:5px;top:280px;cursor:pointer;"></label>Falchion Knife</a>
<a href=/?search=Gut%20Knife&type=weapon class="Text1"><label class="gut" style="width:30px;height:30px;position:absolute;left:5px;top:334.5px;cursor:pointer;"></label>Gut Knife</a>
<a href=/?search=Shadow%20Daggers&type=weapon class="Text1"><label class="shadow" style="width:30px;height:30px;position:absolute;left:5px;top:390px;cursor:pointer;"></label>Shadow Daggers</a>
<a href=/?search=Huntsman%20Knife&type=weapon class="Text1"><label class="huntsman" style="width:30px;height:30px;position:absolute;left:5px;top:444px;cursor:pointer;"></label>Huntsman Knife</a>
<a href=/?search=Bowie%20Knife&type=weapon class="Text1"><label class="bowie" style="width:30px;height:30px;position:absolute;left:5px;top:498.5px;cursor:pointer;"></label>Bowie Knife</a>
</div>
</div>
</li>
<li>
<label id="down-nav-2" class="down-nav">Pistols <b class="caret_down">▼</b></label>
<div class="mainsizer">
<div class="dropdown-menus" id="dropdown-menu-2">
<a href=?search=Glock-18&type=weapon><label class="glock-18" style="width:30px;height:23px;position:absolute;top:9.5px;left:4px;cursor:pointer;"></label>Glock-18</a>
<a href=?search=USP-S&type=weapon><label class="usp-s" style="width:30px;height:23px;position:absolute;top:59px;left:4px;cursor:pointer;"></label>USP-S</a>
<a href=?search=P2000&type=weapon><label class="p2k" style="width:30px;height:23px;position:absolute;top:106px;left:4px;cursor:pointer;"></label>P2000</a>
<a href=?search=Five-Seven&type=weapon><label class="five-seven" style="width:30px;height:23px;position:absolute;top:157px;left:4px;cursor:pointer;"></label>Five-SeveN</a>
<a href=?search=Desert%20Eagle&type=weapon><label class="desert-eagle" style="width:30px;height:23px;position:absolute;top:207px;left:4px;cursor:pointer;"></label>Desert Eagle</a>
<a href=?search=Tec-9&type=weapon><label class="tec9" style="width:30px;height:23px;position:absolute;top:258px;left:4px;cursor:pointer;"></label>Tec-9</a>
<a href=?search=CZ75-Auto&type=weapon><label class="cz75" style="width:30px;height:23px;position:absolute;top:307px;left:4px;cursor:pointer;"></label>CZ75-Auto</a>
<a href=?search=P250&type=weapon><label class="p250" style="width:30px;height:23px;position:absolute;top:357.5px;left:4px;cursor:pointer;"></label>P250</a>
<a href=?search=Dual%20Berettas&type=weapon><label class="dual_berettas" style="width:30px;height:30px;position:absolute;top:407px;left:4px;cursor:pointer;"></label>Dual Berettas</a>
<a href=?search=R8%20Revolver&type=weapon><label class="r8_revolver" style="width:30px;height:23px;position:absolute;top:461.5px;left:4px;cursor:pointer;"></label>R8 Revolver</a>
</div>
</div>
</li>
<li>
<label id="down-nav-4" class="down-nav">SMGs <b class="caret_down">▼</b></label>
<div class="mainsizer">
<div class="dropdown-menus" id="dropdown-menu-3">
<a href=?search=P90&type=weapon><label class="p90" style="width:30px;height:23px;position:absolute;top:10px;left:8px;cursor:pointer;"></label>P90</a>
<a href=?search=MAC-10&type=weapon><label class="mac10" style="width:30px;height:23px;position:absolute;top:61px;left:8px;cursor:pointer;"></label>MAC-10</a>
<a href=?search=MP7&type=weapon><label class="mp7" style="width:30px;height:23px;position:absolute;top:111px;left:8px;cursor:pointer;"></label>MP7</a>
<a href=?search=MP9&type=weapon><label class="mp9" style="width:30px;height:23px;position:absolute;top:161px;left:8px;cursor:pointer;"></label>MP9</a>
<a href=?search=PP-Bizon&type=weapon><label class="pp-bizon" style="width:30px;height:23px;position:absolute;top:210px;left:8px;cursor:pointer;"></label>PP-Bizon</a>
<a href=?search=UMP-45&type=weapon><label class="ump45" style="width:30px;height:23px;position:absolute;top:261.5px;left:8px;cursor:pointer;"></label>UMP-45</a>
</div>
</div>
</li>
<li>
<label id="down-nav-5" class="down-nav">Rifles <b class="caret_down">▼</b></label>
<div class="mainsizer">
<div class="dropdown-menus" id="dropdown-menu-4">
<a href=?search=AK-47&type=weapon><label class="ak47" style="width:30px;height:23px;position:absolute;top:9.5px;left:8px;cursor:pointer;"></label>AK-47</a>
<a href=?search=Galil%20Ar&type=weapon><label class="galil_ar" style="width:30px;height:23px;position:absolute;top:61px;left:8px;cursor:pointer;"></label>Galil AR</a>
<a href=?search=SG%20553&type=weapon><label class="sg553" style="width:30px;height:23px;position:absolute;top:111px;left:8px;cursor:pointer;"></label>SG 553</a>
<a href=?search=M4A4&type=weapon><label class="m4a4" style="width:30px;height:23px;position:absolute;top:161px;left:8px;cursor:pointer;"></label>M4A4</a>
<a href=?search=M4A1-S&type=weapon><label class="m4a1s" style="width:30px;height:23px;position:absolute;top:211.5px;left:8px;cursor:pointer;"></label>M4A1-S</a>
<a href=?search=AUG&type=weapon><label class="aug" style="width:30px;height:23px;position:absolute;top:261.5px;left:8px;cursor:pointer;"></label>AUG</a>
<a href=?search=Famas&type=weapon><label class="famas" style="width:30px;height:23px;position:absolute;top:311.5px;left:8px;cursor:pointer;"></label>Famas</a>
</div>
</div>
</li>
<li>
<label id="down-nav-6" class="down-nav">Snipers <b class="caret_down">▼</b></label>
<div class="mainsizer">
<div class="dropdown-menus" id="dropdown-menu-5">
<a href=?search=AWP&type=weapon><label class="awp" style="width:30px;height:23px;position:absolute;top:9.5px;left:13.5px;cursor:pointer;"></label>AWP</a>
<a href=?search=SSG%2008&type=weapon><label class="ssg08" style="width:30px;height:23px;position:absolute;top:61px;left:13.5px;cursor:pointer;"></label>SSG 08</a>
<a href=?search=SCAR-20&type=weapon><label class="scar20" style="width:30px;height:23px;position:absolute;top:111px;left:13.5px;cursor:pointer;"></label>SCAR-20</a>
<a href=?search=G3SG1&type=weapon><label class="g3sg1" style="width:30px;height:23px;position:absolute;top:161px;left:13.5px;cursor:pointer;"></label>G3SG1</a>
</div>
</div>
</li>
<li>
<label id="down-nav-6" class="down-nav">Heavy <b class="caret_down">▼</b></label>
<div class="mainsizer">
<div class="dropdown-menus" id="dropdown-menu-6">
<a href=?search=Nova&type=weapon><label class="nova" style="width:30px;height:23px;position:absolute;top:9.5px;left:13.5px;cursor:pointer;"></label>Nova</a>
<a href=?search=MAG-7&type=weapon><label class="mag-7" style="width:30px;height:23px;position:absolute;top:61px;left:13.5px;cursor:pointer;"></label>MAG-7</a>
<a href=?search=XM1014&type=weapon><label class="xm1014" style="width:30px;height:23px;position:absolute;top:111px;left:13.5px;cursor:pointer;"></label>XM1014</a>
<a href=?search=Sawed-Off&type=weapon><label class="sawed_off" style="width:30px;height:23px;position:absolute;top:161px;left:13.5px;cursor:pointer;"></label>Sawed-Off</a>
<a href=?search=Negev&type=weapon><label class="negev" style="width:30px;height:23px;position:absolute;top:211.5px;left:13.5px;cursor:pointer;"></label>Negev</a>
<a href=?search=M249&type=weapon><label class="m249" style="width:30px;height:23px;position:absolute;top:261.5px;left:13.5px;cursor:pointer;"></label>M249</a>
</div>
</div>
</li>
<li>
<label id="down-nav-7" class="down-nav">Others <b class="caret_down">▼</b></label>
<div class="mainsizer">
<div class="dropdown-menus" id="dropdown-menu-7">
<a href=?search=Keys&type=weapon><label class="keys" style="width:30px;height:30px;position:absolute;top:6px;left:13.5px;cursor:pointer;"></label>Keys</a>
<a href=?search=Cases&type=weapon><label class="cases" style="width:30px;height:23px;position:absolute;top:61px;left:13.5px;cursor:pointer;"></label>Cases</a>
<a href=?search=Passes&type=weapon><label class="passes" style="width:30px;height:23px;position:absolute;top:105.5px;left:13.5px;cursor:pointer;"></label>Passes</a>
<a href=?search=Capsules&type=weapon><label class="capsules" style="width:30px;height:23px;position:absolute;top:156.5px;left:13.5px;cursor:pointer;"></label>Capsules</a>
<a href=?search=Pins&type=weapon><label class="pins" style="width:30px;height:30px;position:absolute;top:207px;left:13.5px;cursor:pointer;"></label>Pins</a>
<a href=?search=Packages&type=weapon><label class="packages" style="width:30px;height:14px;position:absolute;top:264.5px;left:13.5px;cursor:pointer;"></label>Packages</a>
<a href=?search=Stickers&type=weapon><label class="stickers" style="width:30px;height:30px;position:absolute;top:308px;left:13.5px;cursor:pointer;"></label>Stickers</a>
<a href=?search=Music%20Kits&type=weapon><label class="music_kits" style="width:30px;height:34px;position:absolute;top:356.5px;left:13.5px;cursor:pointer;"></label>Music Kits</a>
</div>
</div>
</li>
</ul>
</div>Full Screen Output: http://output.jsbin.com/jeropupogu
Upvotes: 1
Related Questions
- Onclick event problems
- menu is not showing onclick function is not working properly
- Javascript menu dropdown not triggering function on click
- Menu doesn't stay open when trying to click
- menu onclick function not being seen
- on click menu not functioning
- Menu isn't clickable with jQuery
- JavaScript menu dropdown onClick does not work
- JQuery click function not firing off
- Show menu when clicked