How to open dropdown menu from other class

General
1

I have something like this and i want to open menu using not only .dropdown-btn but also when somebody click ‘a’ class in menu. It is some easy way to change it ?

JS:

 //Submenu Dropdown Toggle
  if ($(".main-header li.menu-item-has-children ul").length) {
    $(".main-header .navigation li.menu-item-has-children > a").append(
      '<div class="dropdown-btn"><span class="fa fa-angle-right"></span></div>'
    );
  }

  //Mobile Nav Hide Show
  if ($(".side-menu__block").length) {
    var mobileMenuContent = $(".main-header .nav-outer .main-menu").html();
    var mobileNavContainer = $(".mobile-nav__container");
    mobileNavContainer.append(mobileMenuContent);

    //Dropdown Button
    mobileNavContainer
      .find("li.menu-item-has-children .dropdown-btn")
      .on("click", function (e) {
        e.preventDefault();
        $(this).toggleClass("open");
        $(this).parent("a").parent("li").children("ul").slideToggle(500);
      });
    
      
    //Menu Toggle Btn
    $(".mobile-nav-toggler").on("click", function () {
      $(".side-menu__block").addClass("active");
    });

    $(".side-menu__block-overlay,.side-menu__toggler, .scrollToLink > a ").on(
      "click",
      function (e) {
        $(".side-menu__block").removeClass("active");
        e.preventDefault();
      }
    );
  }

i try to change JS and still the same problem

2

To allow both the .dropdown-btn and the a tag inside a menu item to toggle the submenu, you’ll need to extend the click handler to also include the a tag, not just .dropdown-btn.

Here’s the part of your current JS responsible for toggling:

mobileNavContainer
  .find("li.menu-item-has-children .dropdown-btn")
  .on("click", function (e) {
    e.preventDefault();
    $(this).toggleClass("open");
    $(this).parent("a").parent("li").children("ul").slideToggle(500);
  });

To make both the .dropdown-btn and the a element trigger the toggle, you can bind the event to both elements like this:

Updated JS:

mobileNavContainer
  .find("li.menu-item-has-children > a, li.menu-item-has-children .dropdown-btn")
  .on("click", function (e) {
    e.preventDefault();
    
    // Find the parent <li>
    var parentLi = $(this).closest("li.menu-item-has-children");

    // Toggle open class on .dropdown-btn for icon change (optional)
    parentLi.find(".dropdown-btn").toggleClass("open");

    // Toggle the submenu
    parentLi.children("ul").slideToggle(500);
  });

Notes:

  • > a ensures we only target direct child anchor tags inside li.menu-item-has-children.
  • closest("li.menu-item-has-children") ensures we consistently find the right parent li, regardless of whether the .dropdown-btn or the a was clicked.
  • This prevents multiple bindings or conflicts and works for dynamically generated content too.

Let me know if you’re also trying to prevent navigation (i.e., following links) or preserve some links from toggling — we can add logic for that too.