下拉菜单 - 更改选项后我必须双击才能打开

Question

我的刀片中有顺风下拉菜单（分页菜单）。 当我第一次打开页面时，单击一下菜单就打开了，但是当我第二次想更改选项时，我必须单击两次才能打开它。

我的代码：

index.blade.php

<a class="w-20 items-actual-count text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" data-dropdown-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">10 </a>
<!-- Dropdown menu -->
<div id="dropdown" class="items-count z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700" aria-labelledby="navbarDropdown" x-placement="bottom-end" style="will-change: transform; position: absolute; transform: translate3d(120px, 48px, 0px); top: 0px; left: 0px;">
  <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">10</a>
  <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">20</a>
  <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">50</a>
  <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">100</a>
</div>

index.js

$(function() {
    $('div.items-count a').click(function(event) {
        event.preventDefault();
        $('a.items-actual-count').text($(this).text());
        getItems($(this).text());
    });
});

当我检查页面时，我有：

1. 一开始 -

   data-popper-placement="bottom"

<div id="dropdown" class="items-count z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700" aria-labelledby="navbarDropdown" x-placement="bottom-end" style="will-change: transform; position: absolute; transform: translate3d(976.5px, 830px, 0px); inset: 0px auto auto 0px; margin: 0px;" data-popper-placement="bottom">

2. 更改后 -

   data-popper-placement="top"

<div id="dropdown" class="items-count z-10 bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 hidden" aria-labelledby="navbarDropdown" x-placement="bottom-end" style="will-change: transform; position: absolute; inset: auto auto 0px 0px; margin: 0px; transform: translate3d(245.5px, -66px, 0px);" data-popper-placement="top">

3. 更改后第一次点击后 -

   data-popper-placement="bottom"

<div id="dropdown" class="items-count z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700" aria-labelledby="navbarDropdown" x-placement="bottom-end" style="will-change: transform; position: absolute; transform: translate3d(976.5px, 830px, 0px); inset: 0px auto auto 0px; margin: 0px;" data-popper-placement="bottom">

Answer 1

您可以尝试：

$(function() {
  $('a.items-actual-count').click(function(event) {
    event.preventDefault();
    $('#dropdown').toggleClass('hidden');
  });

  $('div.items-count a').click(function(event) {
    event.preventDefault();
    $('a.items-actual-count').text($(this).text());
    getItems($(this).text());
    $('#dropdown').addClass('hidden');
  });

  $(document).on('click', function(e) {
    if (!$(e.target).closest('.items-actual-count, #dropdown').length) {
      $('#dropdown').addClass('hidden');
    }
  });
});