Javascript顯示隱藏下拉菜單效果不佳

Question

我有自定義顯示隱藏下拉菜單，我想要的是如果我點擊按鈕，選項列表顯示，當我點擊外部div或再次單擊按鈕，列表被隱藏。

我的問題是，當我點擊按鈕顯示列表，然後單擊股利外將其關閉，該列表將只再次如果你點擊它兩次顯示（而不是通常這是點擊一次）

$(document).ready(function (e) { 
 
    $('.option_down').hide(); 
 
    var state = ""; 
 
    $('.select_down').click(function (e) { 
 
    // hide all span 
 
    var $this = $('#options' + $(this).attr('target')); 
 
    $(".option_down").not($this).hide(); 
 

 
    // here is what I want to do 
 
    if (state === '#options' + $(this).attr('target')) { 
 
     $this.hide(); 
 
     state = ""; 
 
    } else { 
 
     $this.show(); 
 
     state = '#options' + $(this).attr('target'); 
 
    } 
 

 
    e.preventDefault(); 
 
    }); 
 
    //ini aku pindah di document.ready 
 
    $('.option_item_gender').on('click', function() { 
 
    textGender = $('#gender' + $(this).attr('optionGender')).text(); 
 
    $("#select_gender").val(textGender); 
 
    $('.option_down').hide(); 
 
    //trus aku tambahi koding dibawah biar tau kalau nutup semua 
 
    state = ""; 
 
    }); 
 
    $('.option_item_city').on('click', function() { 
 
    textCity = $('#city' + $(this).attr('optionCity')).text(); 
 
    $("#select_city").val(textCity); 
 
    $('.option_down').hide(); 
 
    state = ""; 
 
    }); 
 
}); 
 

 
$(document).mouseup(function (e) { 
 
    var container = new Array(); 
 
    container.push($('.option_down')); 
 

 
    $.each(container, function (key, value) { 
 
    if (!$(value).is(e.target) && $(value).has(e.target).length === 0) { 
 
     $(value).hide(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="large-8 medium-8 columns padding0" style="padding:0px;"> 
 
    <input type="text" id="select_gender" name="select_gender" class="search-box" placeholder="SELECT YOUR GENDER"> 
 
    </div> 
 
    <div class="large-4 medium-4 columns padding0" style="float: left;"> <a href="#"><img src="webroot/images/select_down.png" target="1" class="select_down" /></a> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="large-8 medium-8 columns padding0" style="padding:0px;"> 
 
    <ul id="options1" class="option_down mCustomScrollbar _mCS_2" style="display:none;"> <a class="option_item_gender" optionGender="1"><li id="gender1">Male</li></a> 
 
     <a class="option_item_gender" optionGender="2"><li id="gender2">Female</li></a> 
 
    </ul> 
 
    </div> 
 
    <div class="large-4 medium-4 columns padding0" style="float: left;">&nbsp;</div> 
 
</div> 
 
<br><br><br><br><br> 
 
<div class="row"> 
 
    <div class="large-8 medium-8 columns padding0" style="padding:0px;"> 
 
    <input type="text" id="select_city" name="select_city" class="search-box" placeholder="CITY"> 
 
    </div> 
 
    <div class="large-4 medium-4 columns padding0" style="float: left;"> <a href="#"><img src="webroot/images/select_down.png" target="5" class="select_down"/></a> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="large-8 medium-8 columns padding0" style="padding:0px;"> 
 
    <ul id="options5" class="option_down mCustomScrollbar _mCS_2" style="display:none;"> <a class="option_item_city" optionCity="1"><li id="city1">Malang</li></a> 
 
     <a class="option_item_city" optionCity="2"><li id="city2">Denpasar</li></a> 
 
     <a class="option_item_city" optionCity="3"><li id="city3">Surabaya</li></a> 
 
     <a class="option_item_city" optionCity="4"><li id="city4">Jakarta</li></a> 
 
     <a class="option_item_city" optionCity="5"><li id="city5" style="border:none;">Yogyakarta</li></a> 
 
    </ul> 
 
    </div> 
 
    <div class="large-4 medium-4 columns padding0" style="float: left;">&nbsp;</div> 
 
</div>

Answer 1

有很多方法可以實現用更少的代碼相同，但與解決您的問題的內容，你只需要你$(value).hide();後您的state變量復位，然後把整個$(document).mouseup()事件中$(document).ready()事件，因此全局變量state仍可用於您的mouseup事件。

查看working jsfiddle demo。