By Nourdin Aarab


2019-04-15 10:07:53 8 Comments

I am building a customized dropdown menu and I managed to get the dropdown functional once clicked on the arrow icon. Now I would like the whole menu row to be clickable instead of just the arrow. It's hard to explain, but I have included screenshots below. I have tried playing around with the code but I did not manage to get success results from it.

The menu dropdown when I click on the arrow: https://gyazo.com/dad1eedd6707faf1ee789b434ae239bc

I would like to make it functional when I click on the menu row instead of just the arrow.

jQuery(document).ready(function() {
  // insert toggle button
  jQuery(".advanced-sidebar-nav").each(function() {
    jQuery(".menu-item-has-children", jQuery(this)).each(function() {
      // insert toggle button
      jQuery("> a", jQuery(this)).append(
        '<span class="advanced-sidebar-nav-toggle"></span>'
      );

      // add indent
      var depth = jQuery(this).parents(".menu-item-has-children").length;
      jQuery("ul li a", jQuery(this)).attr(
        "style",
        "padding-left:" + (depth + 2) * 20 + "px !important"
      );

      // open nav menu toggle
      if (jQuery("ul", jQuery(this)).css("display") == "block") {
        jQuery(".advanced-sidebar-nav-toggle", jQuery(this)).addClass(
          "advanced-sidebar-nav-toggle-open"
        );
      }
    });
  });
  // menu toggle
  jQuery(".advanced-sidebar-nav").on(
    "click",
    ".advanced-sidebar-nav-toggle",
    function(e) {
      e.preventDefault();


      const self = this;

      jQuery(".advanced-sidebar-nav-menu-open").each(
        function() {
          $(this).removeClass("advanced-sidebar-nav-menu-open").siblings("ul").slideUp(300);
          $(this).children(".advanced-sidebar-nav-toggle-open").not(self).removeClass("advanced-sidebar-nav-toggle-open");
        }
      );

      jQuery(this).toggleClass("advanced-sidebar-nav-toggle-open");

      if (jQuery(this).hasClass("advanced-sidebar-nav-toggle-open")) {
        jQuery(this)
          .parent("a")
          .addClass("advanced-sidebar-nav-menu-open")
          .siblings("ul")
          .slideDown(300);

      } else {
        jQuery(this)
          .parent("a")
          .removeClass("advanced-sidebar-nav-menu-open")
          .siblings("ul")
          .slideUp(300);
      }
    }
  );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="home-category-container">
  <aside id="advanced_sidebar_nav_widget-3" class="widget-odd widget-last widget-first widget-1 widget woocommerce widget_product_categories widget advanced-sidebar-nav-widget">
    <h3 class="widget-title">Product categorieën</h3>
    <div class="advanced-sidebar-nav advanced-sidebar-nav-default">
      <ul id="menu-sidebar-menu" class="advanced-sidebar-menu">
        <li id="menu-item-4701" class="dropdown menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4701"><a href="#" class="">Laptops<span class="advanced-sidebar-nav-toggle"></span></a>
          <ul class="sub-menu" style="display: none; height: 200px; padding-top: 0px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px; overflow: hidden;">
            <li id="menu-item-4696" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4696"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/laptops/i3/" style="padding-left:40px !important">i3</a></li>
            <li id="menu-item-4697" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4697"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/laptops/i5/" style="padding-left:40px !important">i5</a></li>
            <li id="menu-item-4698" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4698"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/laptops/i7/" style="padding-left:40px !important">i7</a></li>
            <li id="menu-item-4695" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4695"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/laptops/game-laptops/" style="padding-left:40px !important">Game laptops</a></li>
          </ul>
        </li>
        <li id="menu-item-4703" class="dropdown menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4703"><a href="#">Computers<span class="advanced-sidebar-nav-toggle"></span></a>
          <ul class="sub-menu">
            <li id="menu-item-4709" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4709"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/computers/tower/" style="padding-left:40px !important">Tower</a></li>
            <li id="menu-item-4710" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4710"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/computers/workstation/" style="padding-left:40px !important">Workstation</a></li>
            <li id="menu-item-4708" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4708"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/computers/game-computers/" style="padding-left:40px !important">Game computers</a></li>
          </ul>
        </li>
        <li id="menu-item-4704" class="dropdown menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4704"><a href="#">Monitoren<span class="advanced-sidebar-nav-toggle"></span></a>
          <ul class="sub-menu">
            <li id="menu-item-4712" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4712"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/monitoren/19/" style="padding-left:40px !important">19″</a></li>
            <li id="menu-item-4713" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4713"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/monitoren/22/" style="padding-left:40px !important">22″</a></li>
            <li id="menu-item-4714" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4714"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/monitoren/24/" style="padding-left:40px !important">24″</a></li>
            <li id="menu-item-4715" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4715"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/monitoren/27/" style="padding-left:40px !important">27″</a></li>
            <li id="menu-item-4716" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4716"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/monitoren/32/" style="padding-left:40px !important">32″</a></li>
          </ul>
        </li>
        <li id="menu-item-4705" class="dropdown menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4705"><a href="#">Netwerkapparatuur<span class="advanced-sidebar-nav-toggle"></span></a>
          <ul class="sub-menu">
            <li id="menu-item-4721" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4721"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/netwerkapparatuur/switchers/" style="padding-left:40px !important">Switchers</a></li>
            <li id="menu-item-4718" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4718"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/netwerkapparatuur/nas/" style="padding-left:40px !important">Nas</a></li>
            <li id="menu-item-4722" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4722"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/netwerkapparatuur/thin-clients/" style="padding-left:40px !important">Thin clients</a></li>
            <li id="menu-item-4717" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4717"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/netwerkapparatuur/accespoints/" style="padding-left:40px !important">Access Points</a></li>
            <li id="menu-item-4719" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4719"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/netwerkapparatuur/repeaters/" style="padding-left:40px !important">Repeaters</a></li>
            <li id="menu-item-4720" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4720"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/netwerkapparatuur/routers/" style="padding-left:40px !important">Routers</a></li>
          </ul>
        </li>
        <li id="menu-item-4706" class="dropdown menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4706"><a href="#">Hard Drive<span class="advanced-sidebar-nav-toggle"></span></a>
          <ul class="sub-menu">
            <li id="menu-item-4725" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4725"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/hard-drive/ssd-drive/" style="padding-left:40px !important">SSD Drive</a></li>
            <li id="menu-item-4726" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4726"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/hard-drive/ssd-m-2/" style="padding-left:40px !important">SSD M.2</a></li>
            <li id="menu-item-4727" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4727"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/hard-drive/ssd-msata/" style="padding-left:40px !important">SSD Msata</a></li>
            <li id="menu-item-4723" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4723"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/hard-drive/sata-2-5/" style="padding-left:40px !important">Sata 2.5″</a></li>
            <li id="menu-item-4724" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4724"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/hard-drive/sata-3-5/" style="padding-left:40px !important">Sata 3.5″</a></li>
          </ul>
        </li>
        <li id="menu-item-4707" class="dropdown menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4707"><a href="#">Accessoires<span class="advanced-sidebar-nav-toggle"></span></a>
          <ul class="sub-menu">
            <li id="menu-item-4729" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4729"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/accessoires/kabels/" style="padding-left:40px !important">Kabels</a></li>
            <li id="menu-item-4728" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4728"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/accessoires/adapters/" style="padding-left:40px !important">Adapters</a></li>
            <li id="menu-item-4730" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4730"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/accessoires/memory/" style="padding-left:40px !important">Memory</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </aside>
</div>

I tried changing the click to my own custom class named .dropdown, but when I click it, it is adding the classes to the custom class and not the .advanced-sidebar-nav-menu.

Any help is greatly appreciated.

Thank you!

2 comments

@Nourdin Aarab 2019-04-15 12:17:23

I have figured the problem out, I changed the jQuery on click to a different class named .dropdown. Then when a user clicks the row in the menu, it executes the old functionality.

I have changed every reference of '''this'''to the jQuery selector together with the find function that comes with it to add and remove the classes on the corresponding spots.

 jQuery(".advanced-sidebar-nav").on(
        "click",
        ".dropdown",
        function(e) {
            e.preventDefault();


           const self = $(this).find(".advanced-sidebar-nav-toggle");

            jQuery(".advanced-sidebar-nav-menu-open").each(
              function() {
                  $(this).find(".advanced-sidebar-nav-toggle").parent("a").removeClass("advanced-sidebar-nav-menu-open").siblings("ul").slideUp(300);
                  $(this).find(".advanced-sidebar-nav-toggle").not(self).removeClass("advanced-sidebar-nav-toggle-open");
              }
            );

            jQuery(self).toggleClass("advanced-sidebar-nav-toggle-open");

            if(jQuery(self).hasClass("advanced-sidebar-nav-toggle-open")) {
                jQuery(self)
                      .parent("a")
                      .addClass("advanced-sidebar-nav-menu-open")
                      .siblings("ul")
                      .slideDown(300);

                  } else {
                    jQuery(self)
                      .parent("a")
                      .removeClass("advanced-sidebar-nav-menu-open")
                      .siblings("ul")
                      .slideUp(300);
                  }
        }
    );

@Sethuraman 2019-04-15 10:28:58

If I am right you need whole li should be clickable if you want it like that you need to try this way, instead of anchor link provide link for li element as clickable.

Here you can give condition also if you have sub menu then only make it clickable using by adding some classes.

    jQuery(".menu-sidebar-menu").on(
        "click",
        "li",function(){ 
    // your calculation 
});

Related Questions

Sponsored Content

78 Answered Questions

[SOLVED] How do I remove a particular element from an array in JavaScript?

  • 2011-04-23 22:17:18
  • Walker
  • 5650984 View
  • 7025 Score
  • 78 Answer
  • Tags:   javascript arrays

28 Answered Questions

[SOLVED] How to change an element's class with JavaScript?

  • 2008-10-12 20:06:43
  • Nathan Smith
  • 2318399 View
  • 2499 Score
  • 28 Answer
  • Tags:   javascript html dom

33 Answered Questions

[SOLVED] Change an HTML5 input's placeholder color with CSS

28 Answered Questions

[SOLVED] jQuery scroll to element

  • 2011-07-13 09:49:44
  • DiegoP.
  • 2185265 View
  • 2052 Score
  • 28 Answer
  • Tags:   javascript jquery

76 Answered Questions

[SOLVED] How do I detect a click outside an element?

  • 2008-09-30 13:17:12
  • Sergio del Amo
  • 1077295 View
  • 2221 Score
  • 76 Answer
  • Tags:   javascript jquery

19 Answered Questions

[SOLVED] Is it possible to apply CSS to half of a character?

14 Answered Questions

[SOLVED] How to move an element into another element?

14 Answered Questions

[SOLVED] Click through div to underlying elements

  • 2010-09-09 20:42:54
  • Ryan
  • 571076 View
  • 1399 Score
  • 14 Answer
  • Tags:   css

53 Answered Questions

[SOLVED] How do I check if an element is hidden in jQuery?

24 Answered Questions

[SOLVED] Creating a div element in jQuery

Sponsored Content