Menu
I have two drop menus that I need to close when a user clicks outside of them, or on the other drop menu. I have tried several methods without success and only one works slightly. Currently, the "state" menu will open and close properly (the first time) and then not work correctly the second time. but will work properly the 3rd time, and so on. Not sure what's going on here. Any help would be great!
Here's my fiddle: http://jsfiddle.net/SteveSerrano/rc7fhhhu/6/
HTML:
<div class="state_box">
<input type="checkbox" id="state-tgl" onblur="myFunction()">
<label id="state-tgl-label" for="state-tgl"> <span class="collapse_tiny">Choose a state</span>
<img src="/images/template2014/dropdown-black.svg" style="vertical-align:middle; width:10px;">
</label>
<ul class="state-menu" id="state_drop-menu">
<li class="option"><a href="http://www.pia.org/CT"><span class="collapse_tiny">Connecticut</span></a>
</li>
<li><a href="http://www.pia.org/NH"><span class="collapse_tiny">New Hampshire</span></a>
</li>
<li><a href="http://www.pia.org/NJ"><span class="collapse_tiny">New Jersey</span></a>
</li>
<li><a href="http://www.pia.org/NY"><span class="collapse_tiny">New York</span></a>
</li>
</ul>
</div>
<br>
<br>
<br>
<div class="carrier_box">
<input type="checkbox" id="carrier-tgl">
<label id="carrier-tgl-label" for="carrier-tgl"> <span class="collapse_tiny">Select a carrier</span>
<img src="/images/template2014/dropdown-black.svg" style="vertical-align:middle; width:10px;">
</label>
<ul id="carrier_drop-menu">
<li><a href="http://www.pia.org/CT"><span class="collapse_tiny">Carrier 1</span><span class="collapse expand_tiny inline">Conn.</span></a>
</li>
<li><a href="http://www.pia.org/NH"><span class="collapse_tiny">Carrier 2</span><span class="collapse expand_tiny inline">N.H.</span></a>
</li>
<li><a href="http://www.pia.org/NJ"><span class="collapse_tiny">Carrier 3</span><span class="collapse expand_tiny inline">N.J.</span></a>
</li>
<li><a href="http://www.pia.org/NY"><span class="collapse_tiny">Carrier 4</span><span class="collapse expand_tiny inline">N.Y</span></a>
</li>
</ul>
</div>
<br>
<br>
CSS:
.state_box {
margin-bottom:-9px;
width:320px;
}
#state-tgl-label {
padding-left:10px;
padding-right:10px;
padding-bottom:7px;
padding-top:15px;
background-color:rgba(6, 0, 0, 0.09);
}
.state_box ul {
margin:0;
padding:0;
list-style-type: none;
}
.state_box ul li {
display:inline;
}
.state_box ul ul {
display:inline;
}
.state_box ul li a {
text-decoration:none;
padding-left:16px;
color:#000;
font-family:'Raleway', Arial, Helvetica, sans-serif;
font-weight:500;
font-size:23px;
font-size:2.3rem;
text-transform:uppercase;
vertical-align:-8px;
color:#939598;
}
.state_box ul li a.first_state {
padding-left:0px;
}
.state_box ul li .third_level {
color:#a7a9ac;
font-size:18px;
font-size:1.8rem;
vertical-align:-5px;
}
.state_box ul li .fourth_level {
color:#BCBEC0;
font-size:14px;
font-size:1.4rem;
vertical-align:-3px;
}
.state_box ul li a:hover {
color:#808285;
}
.state_box ul li .selected_state {
font-size:36px;
font-size:3.6rem color:#000000;
text-transform:uppercase;
vertical-align:text-top;
color:#000;
font-family:'Raleway', Arial, Helvetica, sans-serif;
}
#state-tgl {
position:absolute;
/* IE 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* Real Browsers */
opacity:0;
}
#state-tgl-label {
font-size:28px;
font-size:1.8rem;
color:#000000;
font-family:'Raleway', Arial, Helvetica, sans-serif;
/*font-weight:500;*/
display:block;
}
#state-tgl-label img {
float:right;
margin-top:5px;
}
#state_drop-menu {
position:relative;
z-index:9999;
background-color:rgba(6, 0, 0, 0.09);
/*border:solid 2px black;*/
width:320px;
padding-top:8px;
padding-bottom:8px;
display:none;
max-height:0px;
transition: max-height 0.25s ease;
margin-top:10px;
}
#state_drop-menu li {
display:block;
padding:0px;
margin:0px;
width:100%;
}
#state_drop-menu li a {
font-size:36px;
font-size:1.8rem;
color:black;
padding:0px;
margin:0px;
display:block;
padding-left:8px;
padding-right:8px;
}
#state_drop-menu li a:hover {
color:white;
background-color:black;
}
#state-tgl:checked ~ #state_drop-menu {
display:block;
max-height:1000px;
}
/*########### Carrier Drop Menu ############*/
.carrier_box {
margin-bottom:-9px;
width:320px;
}
.carrier_box ul {
margin:0;
padding:0;
list-style-type: none;
}
.carrier_box ul li {
display:inline;
}
.carrier_box ul ul {
display:inline;
}
.carrier_box ul li a {
text-decoration:none;
padding-left:16px;
color:#000;
font-family:'Raleway', Arial, Helvetica, sans-serif;
font-weight:500;
font-size:23px;
font-size:2.3rem;
text-transform:uppercase;
vertical-align:-8px;
color:#939598;
}
.carrier_box ul li a.first_carrier {
padding-left:0px;
}
.carrier_box ul li .third_level {
color:#a7a9ac;
font-size:18px;
font-size:1.8rem;
vertical-align:-5px;
}
.carrier_box ul li .fourth_level {
color:#BCBEC0;
font-size:14px;
font-size:1.4rem;
vertical-align:-3px;
}
.carrier_box ul li a:hover {
color:#808285;
}
.carrier_box ul li .selected_carrier {
font-size:36px;
font-size:3.6rem color:#000000;
text-transform:uppercase;
vertical-align:text-top;
color:#000;
font-family:'Raleway', Arial, Helvetica, sans-serif;
}
#carrier-tgl {
position:absolute;
/* IE 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* Real Browsers */
opacity:0;
}
#carrier-tgl-label {
padding-left:10px;
padding-right:10px;
padding-bottom:7px;
padding-top:15px;
background-color:rgba(6, 0, 0, 0.09);
font-size:28px;
font-size:1.8rem;
color:#000000;
font-family:'Raleway', Arial, Helvetica, sans-serif;
/*font-weight:500;*/
display:block;
}
#carrier-tgl-label img {
float:right;
margin-top:5px;
}
#carrier_drop-menu {
position:relative;
z-index:9999;
background-color:rgba(6, 0, 0, 0.09);
/*border:solid 2px black;*/
width:320px;
padding-top:8px;
padding-bottom:8px;
display:none;
max-height:0px;
transition: max-height 0.25s ease;
margin-top:10px;
}
#carrier_drop-menu li {
display:block;
padding:0px;
margin:0px;
width:100%;
}
#carrier_drop-menu li a {
font-size:36px;
font-size:1.8rem;
color:black;
padding:0px;
margin:0px;
display:block;
padding-left:8px;
padding-right:8px;
}
#carrier_drop-menu li a:hover {
color:white;
background-color:black;
}
#carrier-tgl:checked ~ #carrier_drop-menu {
display:block;
max-height:1000px;
}
#charts {
margin-top:50px;
}
JQuery:
/*
$(document).click(function(){
$(".state-menu").hide();
});
$(".state_box").click(function(e){
e.stopPropagation();
});*/
$(".state_box").click(function(){
$(".state-menu").show(1);
$(document).click(function(){
$(".state-menu").hide();
});
});
/*function myFunction() {
$(document).click(function () {
$(".state-menu").hide(1);
});
}*/
559
Edited answer based on OPs comments below:
Working example here: http://jsfiddle.net/am83oczu/
Add a specific ID to each dropdown menu (example below uses id="state-dropdown" and id="carrier-dropdown").
You also need to remove the <input type="checkbox"> you have in place as its onblur attribute messes with everything.
$(document).on('click', function (event) {
// Show the states dropdown if this was clicked...
if (document.getElementById('state-tgl-label') === event.target ||
$.contains(document.getElementById('state-tgl-label'), event.target)) {
$('#carrier-dropdown').hide();
if ($('#state-dropdown').is(':visible')) {
$('#state-dropdown').hide();
} else {
$('#state-dropdown').show(1);
}
}
// ... or show the carrier dropdown if this was clicked
if (document.getElementById('carrier-tgl-label') === event.target ||
$.contains(document.getElementById('carrier-tgl-label'), event.target)) {
$('#state-dropdown').hide();
if ($('#carrier-dropdown').is(':visible')) {
$('#carrier-dropdown').hide();
} else {
$('#carrier-dropdown').show(1);
}
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With