点击关闭其他下拉菜单

时间：2018-08-23 06:41:25

标签： javascript jquery

我正在处理两个自定义的下拉菜单，用于显示水果和动物。当您选择或再次单击该字段并在元素外部单击时，它关闭。我的问题是当我打开两个下拉菜单时，它们的选项没有隐藏。

我想要的是在点击新的下拉菜单后关闭其他下拉菜单。

希望你能理解我。

谢谢。

$(document).click(function(e) {
  // e.stopPropagation();
  var container = $(".custom-dropdown");
  if (container.has(e.target).length === 0) {
    $('.custom-dropdown .options').hide();
  }
});
$('.custom-dropdown .options li').click(function() {
  $(this).closest('.custom-dropdown').find('input').addClass('change');
});
$('.custom-dropdown').click(function() {
  $(this).find('.options').toggle();
});

$('.custom-dropdown .options ul li').click(function() {
  $(this).closest('.custom-dropdown').find('input').val($(this).text());
});
  .col {
   display: inline-block;
    margin-right: 20px;
  }
  .custom-dropdown {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 100px;
  }
  .custom-dropdown input {
    width: 100% ;
    cursor: pointer;
    border-radius: 100px;
    border: 1px solid rgba(77, 85, 133, 0.3);
    height: 24px;
    text-align: left;
    padding-left: 10px;
    font-size: 12px;
    color: rgba(110, 118, 164, 0.4);
  }
  .custom-dropdown .options {
    display: none;
    width: 100%;
    height: 250px;
    position: absolute;
  }
  .custom-dropdown .options ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  .custom-dropdown .options li {
    color: #4D5585;
    background-color: #DDD;
    padding: 8px 5px;
    text-align: left;
    height: initial;
    width: 100%;
    border: 1px solid transparent;
    border-color: transparent;
    position: initial;
    background-image: none;
    font-size: 14px;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="col">
    <div class="custom-dropdown">
      <input type="text" placeholder="animals" readonly>
      <div class="options">
        <ul>
          <li>cat</li>
          <li>dog</li>
          <li>cow</li>
          <li>chicken</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="custom-dropdown">
      <input type="text" placeholder="fruits" readonly>
      <div class="options">
        <ul>
          <li>banana</li>
          <li>apple</li>
          <li>watermelon</li>
          <li>melon</li>
        </ul>
      </div>
    </div>
  </div>
</div>

4 个答案:

答案 0 :(得分：2)

要解决此问题，您需要隐藏所有其他与其他下拉菜单相关的.options元素。为此，您可以在.custom-dropdown点击处理程序中使用以下行：

$('.custom-dropdown').not(this).find('.options').hide();


$(document).click(function(e) {
  // e.stopPropagation();
  var container = $(".custom-dropdown");
  if (container.has(e.target).length === 0) {
    $('.custom-dropdown .options').hide();
  }
});

$('.custom-dropdown .options li').click(function() {
  $(this).closest('.custom-dropdown').find('input').addClass('change');
});

$('.custom-dropdown').click(function() {
  $(this).find('.options').toggle();
  $('.custom-dropdown').not(this).find('.options').hide();
});

$('.custom-dropdown .options ul li').click(function() {
  $(this).closest('.custom-dropdown').find('input').val($(this).text());
});
.col {
  display: inline-block;
  margin-right: 20px;
}

.custom-dropdown {
  position: relative;
  display: inline-block;
  cursor: pointer;
  width: 100px;
}

.custom-dropdown input {
  width: 100%;
  cursor: pointer;
  border-radius: 100px;
  border: 1px solid rgba(77, 85, 133, 0.3);
  height: 24px;
  text-align: left;
  padding-left: 10px;
  font-size: 12px;
  color: rgba(110, 118, 164, 0.4);
}

.custom-dropdown .options {
  display: none;
  width: 100%;
  height: 250px;
  position: absolute;
}

.custom-dropdown .options ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.custom-dropdown .options li {
  color: #4D5585;
  background-color: #DDD;
  padding: 8px 5px;
  text-align: left;
  height: initial;
  width: 100%;
  border: 1px solid transparent;
  border-color: transparent;
  position: initial;
  background-image: none;
  font-size: 14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="col">
    <div class="custom-dropdown">
      <input type="text" placeholder="animals" readonly>
      <div class="options">
        <ul>
          <li>cat</li>
          <li>dog</li>
          <li>cow</li>
          <li>chicken</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="custom-dropdown">
      <input type="text" placeholder="fruits" readonly>
      <div class="options">
        <ul>
          <li>banana</li>
          <li>apple</li>
          <li>watermelon</li>
          <li>melon</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="custom-dropdown">
      <input type="text" placeholder="planets" readonly>
      <div class="options">
        <ul>
          <li>mercury</li>
          <li>venus</li>
          <li>earth</li>
          <li>mars</li>
        </ul>
      </div>
    </div>
  </div>
</div>

答案 1 :(得分：2)

您可以仅添加$(".options:visible").hide();。这将隐藏所有.options（也称为“打开”）

$('.custom-dropdown').click(function() {
  $(".options:visible").not(this).hide();
  $(this).find('.options').toggle();
});

此外，您可以将两个功能合并为一个。

$('.custom-dropdown .options li').click(function() {
  $(this).closest('.custom-dropdown').find('input').addClass('change');
});

$('.custom-dropdown .options ul li').click(function() {
  $(this).closest('.custom-dropdown').find('input').val($(this).text());
});

由于这是相同的触发器，因此只需将它们合并到一起：

$('.custom-dropdown .options ul li').click(function() {
  $(this).closest('.custom-dropdown').find('input').addClass('change');
  $(this).closest('.custom-dropdown').find('input').val($(this).text());
});

演示 

$(document).click(function(e) {
  // e.stopPropagation();
  var container = $(".custom-dropdown");
  if (container.has(e.target).length === 0) {
    $('.custom-dropdown .options').hide();
  }
});
$('.custom-dropdown .options li').click(function() {
  $(this).closest('.custom-dropdown').find('input').addClass('change');
  $(this).closest('.custom-dropdown').find('input').val($(this).text());
});
$('.custom-dropdown').click(function() {
  $(".options:visible").not(this).hide();
  $(this).find('.options').toggle();
});
.col {
  display: inline-block;
  margin-right: 20px;
}

.custom-dropdown {
  position: relative;
  display: inline-block;
  cursor: pointer;
  width: 100px;
}

.custom-dropdown input {
  width: 100%;
  cursor: pointer;
  border-radius: 100px;
  border: 1px solid rgba(77, 85, 133, 0.3);
  height: 24px;
  text-align: left;
  padding-left: 10px;
  font-size: 12px;
  color: rgba(110, 118, 164, 0.4);
}

.custom-dropdown .options {
  display: none;
  width: 100%;
  height: 250px;
  position: absolute;
}

.custom-dropdown .options ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.custom-dropdown .options li {
  color: #4D5585;
  background-color: #DDD;
  padding: 8px 5px;
  text-align: left;
  height: initial;
  width: 100%;
  border: 1px solid transparent;
  border-color: transparent;
  position: initial;
  background-image: none;
  font-size: 14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="col">
    <div class="custom-dropdown">
      <input type="text" placeholder="animals" readonly>
      <div class="options">
        <ul>
          <li>cat</li>
          <li>dog</li>
          <li>cow</li>
          <li>chicken</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="custom-dropdown">
      <input type="text" placeholder="fruits" readonly>
      <div class="options">
        <ul>
          <li>banana</li>
          <li>apple</li>
          <li>watermelon</li>
          <li>melon</li>
        </ul>
      </div>
    </div>
  </div>
</div>

答案 2 :(得分：1)

您可以保存一堆JavaScript代码，而使用纯CSS来处理显示/隐藏下拉菜单。

$('.custom-dropdown .options ul li').click(function() {
  $(this).closest('.custom-dropdown').find('input').val($(this).text());
});
.col {
  display: inline-block;
  margin-right: 20px;
}

.custom-dropdown {
  position: relative;
  display: inline-block;
  cursor: pointer;
  width: 100px;
}

.custom-dropdown input {
  width: 100%;
  cursor: pointer;
  border-radius: 100px;
  border: 1px solid rgba(77, 85, 133, 0.3);
  height: 24px;
  text-align: left;
  padding-left: 10px;
  font-size: 12px;
  color: rgba(110, 118, 164, 0.4);
}

.custom-dropdown .options {
  display: none;
  width: 100%;
  height: 250px;
  position: absolute;
}

.custom-dropdown .options ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.custom-dropdown .options li {
  color: #4D5585;
  background-color: #DDD;
  padding: 8px 5px;
  text-align: left;
  height: initial;
  width: 100%;
  border: 1px solid transparent;
  border-color: transparent;
  position: initial;
  background-image: none;
  font-size: 14px;
}

.custom-dropdown input:focus + .options, .custom-dropdown .options:hover {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="col">
    <div class="custom-dropdown">
      <input type="text" placeholder="animals" readonly>
      <div class="options">
        <ul>
          <li>cat</li>
          <li>dog</li>
          <li>cow</li>
          <li>chicken</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="custom-dropdown">
      <input type="text" placeholder="fruits" readonly>
      <div class="options">
        <ul>
          <li>banana</li>
          <li>apple</li>
          <li>watermelon</li>
          <li>melon</li>
        </ul>
      </div>
    </div>
  </div>
</div>

答案 3 :(得分：0)

您需要在代码中考虑几件事：

  1. 在e.stopPropagation();函数中添加$('.custom-dropdown .options ul li').click()，以便由于来自$('.custom-dropdown').click()的点击事件而不再显示该下拉列表
  2. 您可以先隐藏所有.option元素，然后在.option函数中显示当前单击的$('.custom-dropdown').click()元素。

使用此代码，您还可以在从下拉菜单中选择选项后关闭当前下拉菜单，这是下拉菜单的自然行为。

$(document).click(function(e) {
  // e.stopPropagation();
  var container = $(".custom-dropdown");
  if (container.has(e.target).length === 0) {
    $('.custom-dropdown .options').hide();
  }
});
$('.custom-dropdown .options li').click(function() {
  $(this).closest('.custom-dropdown').find('input').addClass('change');
});
$('.custom-dropdown').click(function() {
  $('.custom-dropdown .options').hide()
  $(this).find('.options').toggle();
});

$('.custom-dropdown .options ul li').click(function(e) {
  $(this).closest('.custom-dropdown').find('input').val($(this).text());
  $(this).closest('.options').hide();
  e.stopPropagation();
});
.col {
  display: inline-block;
  margin-right: 20px;
}

.custom-dropdown {
  position: relative;
  display: inline-block;
  cursor: pointer;
  width: 100px;
}

.custom-dropdown input {
  width: 100%;
  cursor: pointer;
  border-radius: 100px;
  border: 1px solid rgba(77, 85, 133, 0.3);
  height: 24px;
  text-align: left;
  padding-left: 10px;
  font-size: 12px;
  color: rgba(110, 118, 164, 0.4);
}

.custom-dropdown .options {
  display: none;
  width: 100%;
  height: 250px;
  position: absolute;
}

.custom-dropdown .options ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.custom-dropdown .options li {
  color: #4D5585;
  background-color: #DDD;
  padding: 8px 5px;
  text-align: left;
  height: initial;
  width: 100%;
  border: 1px solid transparent;
  border-color: transparent;
  position: initial;
  background-image: none;
  font-size: 14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="col">
    <div class="custom-dropdown">
      <input type="text" placeholder="animals" readonly>
      <div class="options">
        <ul>
          <li>cat</li>
          <li>dog</li>
          <li>cow</li>
          <li>chicken</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="custom-dropdown">
      <input type="text" placeholder="fruits" readonly>
      <div class="options">
        <ul>
          <li>banana</li>
          <li>apple</li>
          <li>watermelon</li>
          <li>melon</li>
        </ul>
      </div>
    </div>
  </div>
</div>

相关问题
最新问题