Javascript显示隐藏下拉列表不能很好地工作

Question

我有自定义的显示-隐藏下拉菜单，我想要的是，如果我单击按钮，就会显示选项列表，当我单击div外部或再次单击按钮时，列表就会隐藏。

我的问题是，当我点击按钮显示列表，然后点击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事件仍然可用。

请参阅正在运行的jsfiddle演示。