Trình đơn thả xuống sẽ không đóng đúng cách

Question

Tôi có hai menu thả mà tôi cần đóng khi người dùng nhấp vào bên ngoài hoặc trên menu thả xuống khác. Tôi đã thử một số phương pháp không thành công và chỉ có một phương pháp hoạt động nhẹ. Hiện tại, menu "trạng thái" sẽ mở và đóng đúng cách (lần đầu tiên) và sau đó không hoạt động chính xác lần thứ hai. nhưng sẽ hoạt động đúng vào lần thứ 3, v.v. Bạn không chắc chắn những gì đang xảy ra ở đây. Bất kỳ sự trợ giúp nào đều sẽ là tuyệt vời!

Dưới đây là fiddle tôi: 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

Tiếp theo không phải là một giải pháp rất tốt - nhưng điều này được dựa trên cấu trúc hiện tại của html của bạn (như trong jsFiddle) và hiểu biết của tôi về những gì bạn đang cố gắng làm ...

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

Xem jsFiddle here

---

Sửa Dựa trên ý kiến ​​- mã được cập nhật để:

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

Đã cập nhật JsFiddle here.

Answer 2

câu trả lời Sửa dựa trên Ops ý kiến ​​dưới đây:

dụ làm việc ở đây: http://jsfiddle.net/am83oczu/

Thêm một ID cụ thể cho từng đơn thả xuống (ví dụ dưới đây sử dụng id="state-dropdown" và id="carrier-dropdown").

Bạn cũng cần phải xóa <input type="checkbox"> bạn có tại chỗ vì thuộc tính onblur gây rối với mọi thứ.

$(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

Hãy thử bằng cách sử dụng phương pháp này ở đây http://www.designchemical.com/blog/index.php/jquery/jquery-simple-vertical-accordion-menu/ Bạn nên quản lý để làm những gì bạn muốn bằng cách làm theo đơn accordion tuto.