jquery - 隐藏和取消隐藏相关下拉菜单

Question

我制作了自定义选择菜单

    <span class="depend">
        <div class="col-md-3 col-sm-3 car-finder-form__input-value" data-select-dropdown=".finder-form--one">
            <a href="javascript:void(0);">Select 1</a>
        </div>
        <div class="col-md-3 col-sm-3 finder-form__input-value" data-select-dropdown=".finder-form--two">
            <a href="javascript:void(0);">Select 2</a>
        </div>
        <div class="col-md-3 col-sm-3 finder-form__input-value"  data-select-dropdown=".finder-form--three">
            <a href="javascript:void(0);">Select 3</a>
        </div>
     </span>

这是下拉菜单

<div class="row finder-form__dropdown finder-form--one hide">
        <div class="col-xs-12">
            <div class="row finder-form__dropdown-list">
                <a href="">bla bla</a>
            </div>      
        </div>
    </div>
<div class="row finder-form__dropdown finder-form--two hide">
        <div class="col-xs-12">
            <div class="row finder-form__dropdown-list">
                <a href="">bla bla</a>
            </div>      
        </div>
    </div>
<div class="row finder-form__dropdown finder-form--three hide">
        <div class="col-xs-12">
            <div class="row finder-form__dropdown-list">
                <a href="">bla bla</a>
            </div>      
        </div>
    </div>

我的 jQuery 目前看起来像这样

jQuery("div.finder-form__input-value").on("click", function(){
                        var drpdwn = $(this).data("select-dropdown");
                        $(drpdwn).toggleClass("hide");
                    });

单击时 jQuery 会取消隐藏第一个下拉菜单。并在单击时再次隐藏它。

但是当我单击第二个下拉列表时，如何使其关闭第一个下拉列表？当我点击第三个下拉菜单时关闭第二个下拉菜单吗？当我点击第一个时，关闭第二个和第三个？

Answer 1

使用 :not 隐藏 data-select-dropdown 中没有该类的所有下拉列表，然后切换选定的下拉列表

jQuery("div.finder-form__input-value").on("click", function() {
  var drpdwn = $(this).data("select-dropdown");
  $('.finder-form__dropdown:not(' + drpdwn + ')').addClass('hide');
  $(drpdwn).toggleClass("hide");
});

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="depend">
        <div class="col-md-3 col-sm-3 finder-form__input-value" data-select-dropdown=".finder-form--one">
            <a href="javascript:void(0);">Select 1</a>
        </div>
        <div class="col-md-3 col-sm-3 finder-form__input-value" data-select-dropdown=".finder-form--two">
            <a href="javascript:void(0);">Select 2</a>
        </div>
        <div class="col-md-3 col-sm-3 finder-form__input-value"  data-select-dropdown=".finder-form--three">
            <a href="javascript:void(0);">Select 3</a>
        </div>
     </span>


<div class="row finder-form__dropdown finder-form--one hide">
  <div class="col-xs-12">
    <div class="row finder-form__dropdown-list">
      <a href="">bla bla one</a>
    </div>
  </div>
</div>
<div class="row finder-form__dropdown finder-form--two hide">
  <div class="col-xs-12">
    <div class="row finder-form__dropdown-list">
      <a href="">bla bla tow</a>
    </div>
  </div>
</div>
<div class="row finder-form__dropdown finder-form--three hide">
  <div class="col-xs-12">
    <div class="row finder-form__dropdown-list">
      <a href="">bla bla three</a>
    </div>
  </div>
</div>