tailwind css - Dropdown Menu collapses when a menu item is clicked, but I want the menu to be expanded when a menu item is click

I have some dropdown menus in the side nav. When I click on a dropdown menu item, the dropdown menu collapses. It is a bit annoying for the user. My app is built on phoenix framework. I also used Tailwind CSS and flowbite.

Here is the code

              <button
                type="button"
                class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
                aria-controls="dropdown-layouts-router-api-config"
                data-collapse-toggle="dropdown-layouts-router-api-config"
              >
                <svg 
                  class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" 
                  aria-hidden="true" 
                  xmlns="; 
                  fill="currentColor" 
                  viewBox="0 0 24 24"
                >
                  <path fill-rule="evenodd" d="M12 8a1 1 0 0 0-1 1v10H9a1 1 0 1 0 0 2h11a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1h-8Zm4 10a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z" clip-rule="evenodd"/>
                  <path fill-rule="evenodd" d="M5 3a2 2 0 0 0-2 2v6h6V9a3 3 0 0 1 3-3h8c.35 0 .687.06 1 .17V5a2 2 0 0 0-2-2H5Zm4 10H3v2a2 2 0 0 0 2 2h4v-4Z" clip-rule="evenodd"/>
                </svg>

                <span class="flex-1 ml-3 text-left whitespace-nowrap" sidebar-toggle-item>
                  Routers
                </span>
                <svg
                  sidebar-toggle-item
                  class="w-6 h-6"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                  xmlns=";
                >
                  <path
                    fill-rule="evenodd"
                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                    clip-rule="evenodd"
                  >
                  </path>
                </svg>
              </button>
              <ul id="dropdown-layouts-router-api-config" class="hidden py-2 space-y-2">
                <li>
                  <.link
                    href={~p"/routers"}
                    class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
                  >
                    Router list
                  </.link>
                </li>
              </ul>

I tried to use the ignoreClickOutsideClass option to solve this issue. But I am a bit confused, how to use it. And previously also use the following javascript code-


    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const dropdownBtn = document.getElementById("dropdownBtn");
            const dropdownMenu = document.getElementById("dropdownMenu");
            const chevron = document.getElementById("chevron");

            dropdownBtn.addEventListener("click", function (event) {
                event.stopPropagation(); // Prevent closing when clicking inside the dropdown
                dropdownMenu.classList.toggle("hidden");
                chevron.classList.toggle("rotate-180");
            });

            // Prevent dropdown from closing when clicking on items
            document.querySelectorAll("#dropdownMenu a").forEach(item => {
                item.addEventListener("click", function (event) {
                    event.stopPropagation(); // Stop event from bubbling up
                });
            });

            // Close dropdown if clicked outside
            document.addEventListener("click", function () {
                dropdownMenu.classList.add("hidden");
                chevron.classList.remove("rotate-180");
            });
        });
    </script>

I want the menu to be expanded when any menu item is clicked. How to do it?

Here is the code

              <button
                type="button"
                class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
                aria-controls="dropdown-layouts-router-api-config"
                data-collapse-toggle="dropdown-layouts-router-api-config"
              >
                <svg 
                  class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" 
                  aria-hidden="true" 
                  xmlns="http://www.w3./2000/svg" 
                  fill="currentColor" 
                  viewBox="0 0 24 24"
                >
                  <path fill-rule="evenodd" d="M12 8a1 1 0 0 0-1 1v10H9a1 1 0 1 0 0 2h11a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1h-8Zm4 10a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z" clip-rule="evenodd"/>
                  <path fill-rule="evenodd" d="M5 3a2 2 0 0 0-2 2v6h6V9a3 3 0 0 1 3-3h8c.35 0 .687.06 1 .17V5a2 2 0 0 0-2-2H5Zm4 10H3v2a2 2 0 0 0 2 2h4v-4Z" clip-rule="evenodd"/>
                </svg>

                <span class="flex-1 ml-3 text-left whitespace-nowrap" sidebar-toggle-item>
                  Routers
                </span>
                <svg
                  sidebar-toggle-item
                  class="w-6 h-6"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                  xmlns="http://www.w3./2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                    clip-rule="evenodd"
                  >
                  </path>
                </svg>
              </button>
              <ul id="dropdown-layouts-router-api-config" class="hidden py-2 space-y-2">
                <li>
                  <.link
                    href={~p"/routers"}
                    class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
                  >
                    Router list
                  </.link>
                </li>
              </ul>

I tried to use the ignoreClickOutsideClass option to solve this issue. But I am a bit confused, how to use it. And previously also use the following javascript code-


    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const dropdownBtn = document.getElementById("dropdownBtn");
            const dropdownMenu = document.getElementById("dropdownMenu");
            const chevron = document.getElementById("chevron");

            dropdownBtn.addEventListener("click", function (event) {
                event.stopPropagation(); // Prevent closing when clicking inside the dropdown
                dropdownMenu.classList.toggle("hidden");
                chevron.classList.toggle("rotate-180");
            });

            // Prevent dropdown from closing when clicking on items
            document.querySelectorAll("#dropdownMenu a").forEach(item => {
                item.addEventListener("click", function (event) {
                    event.stopPropagation(); // Stop event from bubbling up
                });
            });

            // Close dropdown if clicked outside
            document.addEventListener("click", function () {
                dropdownMenu.classList.add("hidden");
                chevron.classList.remove("rotate-180");
            });
        });
    </script>

I want the menu to be expanded when any menu item is clicked. How to do it?

Share Improve this question asked Mar 13 at 15:50 Mostafiz Ur Rahman 531 gold badge1 silver badge7 bronze badges

1 Maybe something like submenu stackoverflow/questions/21973309/… – Joop Eggen Commented Mar 13 at 16:02
Nope. This doesn't have the solution to my problem. – Mostafiz Ur Rahman Commented Mar 15 at 8:59

Add a comment |

1 Answer 1

Sorted by: Reset to default 1

Use Flowbite’s built-in Collapse class to manage the dropdown state programmatically.
Prevent the dropdown from collapsing when clicking menu items.

Try this

<button
  type="button"
  class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
  aria-controls="dropdown-layouts-router-api-config"
  data-collapse-toggle="dropdown-layouts-router-api-config"
>
  <svg 
    class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" 
    aria-hidden="true" 
    xmlns="http://www.w3./2000/svg" 
    fill="currentColor" 
    viewBox="0 0 24 24"
  >
    <path fill-rule="evenodd" d="M12 8a1 1 0 0 0-1 1v10H9a1 1 0 1 0 0 2h11a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1h-8Zm4 10a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z" clip-rule="evenodd"/>
    <path fill-rule="evenodd" d="M5 3a2 2 0 0 0-2 2v6h6V9a3 3 0 0 1 3-3h8c.35 0 .687.06 1 .17V5a2 2 0 0 0-2-2H5Zm4 10H3v2a2 2 0 0 0 2 2h4v-4Z" clip-rule="evenodd"/>
  </svg>
  <span class="flex-1 ml-3 text-left whitespace-nowrap">Routers</span>
  <svg
    class="w-6 h-6 transition-transform"
    fill="currentColor"
    viewBox="0 0 20 20"
    xmlns="http://www.w3./2000/svg"
  >
    <path
      fill-rule="evenodd"
      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
      clip-rule="evenodd"
    />
  </svg>
</button>
<ul id="dropdown-layouts-router-api-config" class="hidden py-2 space-y-2">
  <li>
    <.link
      href={~p"/routers"}
      class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
    >
      Router list
    </.link>
  </li>
</ul>

you’re using Flowbite, leverage its Collapse class instead of manually toggling classes. Add this script to your Phoenix layout file (e.g. app.html.heex) or a separate JS file loaded after Flowbite’s script:

<script src="https://cdnjs.cloudflare/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
  const collapseElement = document.getElementById("dropdown-layouts-router-api-config");
  const collapseButton = document.querySelector("[data-collapse-toggle='dropdown-layouts-router-api-config']");
  const collapse = new Collapse(collapseElement);


  collapseButton.addEventListener("click", function (event) {
    event.preventDefault(); 
    collapse.toggle();
    const chevron = collapseButton.querySelector("svg:last-child");
    chevron.classList.toggle("rotate-180");
  });

  const menuItems = collapseElement.querySelectorAll("a");
  menuItems.forEach(item => {
    item.addEventListener("click", function (event) {
      event.stopPropagation(); 
    });
  });
});
</script>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

tailwind css - Dropdown Menu collapses when a menu item is clicked, but I want the menu to be expanded when a menu item is click

1 Answer 1

与本文相关的文章

评论列表(0)