Question

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

我的问题是当我点击按钮显示列表然后在div外面点击以关闭它时，如果你点击它两次（而不是通常的点击它一次），列表将再次显示

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

有很多方法可以用更少的代码实现相同的目标，但是对于解决问题的内容，您只需要在state之后重置$(value).hide();变量，然后将整个{{1}重置$(document).mouseup()事件中的事件，因此全局变量$(document).ready()仍可用于state事件。

请参阅working jsfiddle demo。

Javascript show hide dropdown效果不佳

1 个答案: