Il menu di selezione non si chiude correttamente

Question

Ho due menu a discesa che devo chiudere quando un utente fa clic al di fuori di essi o sull'altro menu a discesa. Ho provato diversi metodi senza successo e solo uno funziona leggermente. Attualmente, il menu "stato" si aprirà e si chiuderà correttamente (la prima volta) e quindi non funzionerà correttamente la seconda volta. ma funzionerà correttamente la terza volta e così via. Non sono sicuro di cosa sta succedendo qui. Qualsiasi aiuto sarebbe grande!

Ecco il mio violino: 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); 
    }); 
}*/ 

Answer 1

seguito non è una soluzione molto buona - ma questo si basa sulla struttura attuale del codice HTML (come in jsFiddle) e la mia comprensione di ciò che si sta cercando di fare ...

$(".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); 
}); 

Vedi jsFiddle here

---

Modifica sulla base commenti - il codice viene aggiornato per:

/*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); 
}); 

aggiornato JsFiddle here.

Answer 2

risposta cura sulla base di PO commenti qui sotto:

esempio Lavorare qui: http://jsfiddle.net/am83oczu/

Aggiungere un ID specifico per ciascun menu a discesa (ad esempio sotto usa id="state-dropdown" e id="carrier-dropdown").

È inoltre necessario rimuovere lo <input type="checkbox"> che si è inserito come il suo attributo onblur con tutto.

$(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); 
      } 
    } 

}); 

Answer 3

Proviamo con questo metodo qui http://www.designchemical.com/blog/index.php/jquery/jquery-simple-vertical-accordion-menu/ Si dovrebbe riuscire a fare ciò che si vuole dal seguente menu a fisarmonica tuto.