Drop-Menü wird nicht ordnungsgemäß schließen

Ich habe zwei Dropdown-Menüs, die ich schließen muss, wenn ein Benutzer außerhalb von ihnen klickt, oder auf dem anderen Dropdown-Menü. Ich habe mehrere Methoden ohne Erfolg ausprobiert und nur einer funktioniert etwas. Derzeit wird das "Status" -Menü ordnungsgemäß geöffnet und geschlossen (beim ersten Mal) und dann beim zweiten Mal nicht korrekt ausgeführt. aber wird das 3. Mal richtig funktionieren, und so weiter. Ich bin mir nicht sicher, was hier vor sich geht. Jede Hilfe wäre großartig!Drop-Menü wird nicht ordnungsgemäß schließen

Hier ist meine Geige: 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); 
    }); 
}*/

Quelle

2015-10-05 Steven Serrano

Es folgt nicht eine sehr gute Lösung - aber dies ist auf die aktuelle Struktur Ihres HTML-basiert (wie in jsFiddle) und mein Verständnis von dem, was Sie zu tun versuchen ...

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

Siehe jsFiddle here

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

: -

bearbeiten Basierend auf Kommentare der Code wird aktualisiert

Aktualisiert JsFiddle here.

Quelle

2015-10-05 15:45:24 Taleeb

Hey Danke! Genau das suche ich.Das Menü schließt sich jedoch nicht mehr, wenn Sie auf den Eltern oder die "state_box" und "Carrier_box" klicken –

Ah! Sie meinen, wenn State Box wieder angeklickt wird --- Ich habe nicht daran gedacht ... Lassen Sie mich – Taleeb

@ StevenSerrano sehen. Siehe hierzu [jsFiddle] (http://jsfiddle.net/taleebanwar/rc7fhhhu/8/). Ich denke, es gibt ein weiteres Problem - das muss ich beheben, bevor ich die Antwort bearbeite. – Taleeb

Edited Antwort basierend auf OPs Kommentare unter:

Arbeitsbeispiel hier: http://jsfiddle.net/am83oczu/

eine spezifische ID für jedes Drop-Down-Menü hinzufügen (Beispiel unten verwendet id="state-dropdown" und id="carrier-dropdown").

Sie müssen auch die <input type="checkbox"> entfernen, die Sie in Position haben, wie sein onblur Attribut mit allem vermasselt.

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

});

Quelle

2015-10-05 15:22:33

Danke für die Eingabe, aber dies zeigt und versteckt nur die Menüs, wenn ein Benutzer sie anklickt, was nicht mein Problem ist. Sie öffnen/schließen sich gut, wenn Sie direkt auf sie klicken. –

Ihr Problem ist die Kombination von Klicks auf "Dokument" und auf den Menüs selbst. Der Grund, warum es manchmal funktioniert und manchmal nicht mit "bubbling" zu tun hat (manchmal handelt es sich nur um Ihren 'Dokument'-Klick, manchmal handelt es sich nur um Ihren Menü-Klick). Ich werde meine Antwort mit einer alternativen Lösung dafür bearbeiten. –

@StevenSerrano Ich habe meine Antwort wie versprochen aktualisiert - lassen Sie mich wissen, ob das hilft: http://jsfiddle.net/e3jtgof4/ –

versuchen Lassen Sie durch diese Methode hier http://www.designchemical.com/blog/index.php/jquery/jquery-simple-vertical-accordion-menu/ verwenden, sollten Sie verwalten zu tun, was Sie mit dem folgenden Akkordeon-Menü tuto möchten.

Quelle

2015-10-05 15:30:30

Drop-Menü wird nicht ordnungsgemäß schließen

Antwort

Verwandte Themen