У меня есть таблица с кнопкой раскрывающегося списка в каждой строке. При нажатии на кнопку открывается раскрывающийся список, при нажатии за пределами области раскрывающийся список закрывается. Как сделать так, чтобы когда ...

3
Nikita_Zhurb 12 Фев 2021 в 10:31

2 ответа

Лучший ответ

Обновите свой $(".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>
1
Karan 12 Фев 2021 в 08:05
$(document).on("click",".click-class:not(.other-click-class)",function(){  })
0
Lohit 12 Фев 2021 в 08:03
66167861