All geek questions in one place

Incorrect menu closure

I have two drag and drop menus that need to be closed when the user clicks on them or in another drag and drop menu. I tried several methods without success, and only one works a bit. Currently, the Status menu will be open and closed (first time), and then will not work correctly a second time. but will work correctly the 3rd time, etc. Not sure what's going on here. Any help would be great!

Here is 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">NH</span></a> </li> <li><a href="http://www.pia.org/NJ"><span class="collapse_tiny">Carrier 3</span><span class="collapse expand_tiny inline">NJ</span></a> </li> <li><a href="http://www.pia.org/NY"><span class="collapse_tiny">Carrier 4</span><span class="collapse expand_tiny inline">NY</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); }); }*/
+5
source share
3 answers

This is not a good solution, but it is based on the current structure of your html (as in jsFiddle) and my understanding of what you are trying to do ...

 $(".state_box").click(function (e) { e.stopPropagation(); e.preventDefault(); $("#carrier_drop-menu").hide(); $('#state-tgl').prop('checked', true); $(".state-menu").show(); }); $(".carrier_box").click(function (e) { e.stopPropagation(); e.preventDefault(); $(".state-menu").hide(); $('#carrier-tgl').prop('checked', true); $("#carrier_drop-menu").show(); }); $(document).click(function () { $(".state-menu").hide(); $("#carrier_drop-menu").hide(); $('#state-tgl').prop('checked', false); $('#carrier-tgl').prop('checked', false); });

See jsFiddle here

Edit Based on comments - the code is updated to:

 /*As initially the menus are hidden using css class So toggle won't work for the first time. So we need to add these two lines*/ $("#carrier_drop-menu").hide(); $(".state-menu").hide(); $(".state_box").click(function (e) { e.stopPropagation(); e.preventDefault(); $("#carrier_drop-menu").hide(); $('#state-tgl').prop('checked', true); $(".state-menu").toggle(); }); $(".carrier_box").click(function (e) { e.stopPropagation(); e.preventDefault(); $(".state-menu").hide(); $('#carrier-tgl').prop('checked', true); $("#carrier_drop-menu").toggle(); }); $(document).click(function () { $(".state-menu").hide(); $("#carrier_drop-menu").hide(); $('#state-tgl').prop('checked', false); $('#carrier-tgl').prop('checked', false); });

Updated JsFiddle here .

+1
source

Edited answer based on OPs comments below:

A working example is here: http://jsfiddle.net/am83oczu/

Add a specific identifier to the drop-down menu (the example below uses id="state-dropdown" and id="carrier-dropdown" ).

You also need to remove the <input type="checkbox"> , which you have as the onblur attribute, 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); } } });
+2
source

Try using this method here http://www.designchemical.com/blog/index.php/jquery/jquery-simple-vertical-accordion-menu/ You will need to do what you want after the trampoline menu.

0
source

Source: https://habr.com/ru/post/1232984/

More articles:


All Articles