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

79 Answered Questions

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

  • 2011-04-23 22:17:18
  • Walker
  • 5781414 View
  • 7209 Score
  • 79 Answer
  • Tags:   javascript arrays

29 Answered Questions

[SOLVED] jQuery scroll to element

  • 2011-07-13 09:49:44
  • DiegoP.
  • 2237954 View
  • 2103 Score
  • 29 Answer
  • Tags:   javascript jquery

54 Answered Questions

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

24 Answered Questions

[SOLVED] Creating a div element in jQuery

15 Answered Questions

[SOLVED] Click through div to underlying elements

  • 2010-09-09 20:42:54
  • Ryan
  • 587032 View
  • 1429 Score
  • 15 Answer
  • Tags:   css

33 Answered Questions

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

28 Answered Questions

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

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

76 Answered Questions

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

  • 2008-09-30 13:17:12
  • Sergio del Amo
  • 1101405 View
  • 2263 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?

  • 2009-08-14 20:14:45
  • Mark Richman
  • 1005539 View
  • 1561 Score
  • 14 Answer
  • Tags:   javascript jquery html

Sponsored Content