下拉菜单无法正常关闭

Question

我有两个下拉菜单，当用户点击它们外面或另一个下拉菜单时我需要关闭它们。我尝试了几种方法但没有成功，只有一种方法略有效果。目前，“状态”菜单将正确打开和关闭（第一次），然后第二次无法正常工作。但第三次会正常工作，依此类推。不知道这里发生了什么。任何帮助都会很棒！

这是我的小提琴：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

根据以下OP评论编辑的答案：

这里的工作示例：http://jsfiddle.net/am83oczu/

为每个下拉菜单添加特定ID（以下示例使用id="state-dropdown"和id="carrier-dropdown"）。

您还需要移除<input type="checkbox">，因为其onblur属性与所有内容混淆。

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

以下不是一个非常好的解决方案 - 但这是基于你的html的当前结构（如在jsFiddle中）以及我对你要做的事情的理解......

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

请参阅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);
});

更新了JsFiddle here。

Answer 3

让我们尝试在这里使用此方法http://www.designchemical.com/blog/index.php/jquery/jquery-simple-vertical-accordion-menu/ 你应该按照手风琴菜单tuto设法做你想做的事。