时间戳

首页 > 解决方案 > 下拉列表问题

javascript - 下拉列表问题

问题描述

我有一个表格，每行都有一个下拉按钮。单击按钮时，会打开一个下拉列表，当您在区域外单击时，会关闭下拉列表。如何确保在下拉列表区域中单击时不会关闭？以及如何确保当您单击另一个带有下拉列表的按钮时，之前的下拉列表关闭？

$(".dropdown").click(function(e) {
  $(this).find(".dropdown-menu").slideToggle();
});

$(document).on("click", function(event) {
  var $trigger = $(".dropdown");
  if ($trigger !== event.target && !$trigger.has(event.target).length) {
    $(".dropdown-menu").slideUp("fast");
  }
});
.dropdown {
  display: inline-block;
  position: relative;
}

.dropdown-menu {
  text-align: center;
  font-size: 14px;
  background-color: #ffffff;
  color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td>
  <li class="dropdown">
    <button></button>
    <ul class="dropdown-menu">
      <li></li>
      <li></li>
    </ul>
  </li>
</td>

标签： javascriptjquerycssdropdown

解决方案

如下更新您$(".dropdown").click(function(e) { ... }的。

  1. 使用 slideDown 而不是 slideToggle 将其设置为始终打开。
  2. 选择所有下拉菜单并使用$(".dropdown-menu").not($(this).find(".dropdown-menu"))和应用删除当前下拉菜单.slideUp("fast")。

在下面试试。

$(".dropdown").click(function(e) {
  // use slideDown instead of slideToggle to set it always open.
  $(this).find(".dropdown-menu").slideDown();
  // select all dropdown-menu and remove current dropdown-menu with .not
  // hide other dropdowns.
  $(".dropdown-menu").not($(this).find(".dropdown-menu")).slideUp("fast");
});

$(document).on("click", function(event) {
  var $trigger = $(".dropdown");
  if ($trigger !== event.target && !$trigger.has(event.target).length) {
    $(".dropdown-menu").slideUp("fast");
  }
});

$(".dropdown-menu").slideUp();
.dropdown {
  display: inline-block;
  position: relative;
}

.dropdown-menu {
  text-align: center;
  font-size: 14px;
  background-color: #ffffff;
  color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <td>1</td>
    <td>
      <li class="dropdown">
        <button>open dropdown</button>
        <ul class="dropdown-menu" style="display: none;">
          <li>11</li>
          <li>12</li>
        </ul>
      </li>
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>
      <li class="dropdown">
        <button>open dropdown</button>
        <ul class="dropdown-menu" style="display: none;">
          <li>21</li>
          <li>22</li>
        </ul>
      </li>
    </td>
  </tr>
</table>

推荐阅读