CODEWITHSUNDEEP
javascriptjquerydrop-down-menu
Lucas Bustamante
Lucas Bustamante

Reputation: 17188

Add class to active menu on click

When I click a parent menu (like Domains), it shows it's children, when I click one of them (like, My Domains), the page reloads with the parent menu closed (not expanded, as the image bellow)

The classes are "active" for menu active (blue background) and "open" for visible children

Bug

These are the JS codes:

  // Handle clicking on the naviagtion dropdown items
  jQuery('.navbar .toggle > a').click(function() {
    if (!jQuery(this).next().is(":visible")) {
      jQuery('.toggle a').removeClass('open');
      jQuery('.toggle ul:visible').hide();
    }
    jQuery(this).toggleClass('open');
    jQuery(this).next().slideToggle();
  });

  // Tabs Changer
  // ===============================
    //Default Action
    jQuery(".tab-content").hide(); //Hide all content
    if (jQuery(location).attr('hash').substr(1)!="") {
        var activeTab = jQuery(location).attr('hash');
        jQuery("ul").find('li').removeClass('open');
        jQuery("ul.nav li").removeClass("active"); //Remove any "active" class
        jQuery(activeTab+"nav").addClass("active");
        jQuery(activeTab).show();
    } else {
        jQuery("#tabs ul.nav .nav-tabs li:first").addClass("active").show(); //Activate first tab
        jQuery(".tab-content:first").show(); //Show first tab content
    }

    //On Click Event
    jQuery("#tabs ul.nav li").click(function() {
        jQuery("ul").find('li').removeClass('open');
        jQuery("ul.nav li").removeClass("active"); //Remove any "active" class
        jQuery(this).addClass("active"); //Add "active" class to selected tab
        var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        if (activeTab.substr(0,1)=="#" && activeTab.substr(1)!="") { //Determine if a tab or link
            jQuery(".tab-content").hide(); //Hide all tab content
            jQuery(activeTab).fadeIn(); //Fade in the active content
            return false;
        } else {
            return true; // If link allow redirect
        }
    });

});

Click Login to see a live example of the menu: https://whmcsdesigns.com/demo/clientarea.php?action=domains

Upvotes: 4

Views: 4910

Answers (3)

Shea
Shea

Reputation: 1950

If you load the page and enter the following, in the console, you will see that it works as you expect:

jQuery(".navbar .toggle.active > .nav-link").addClass('open'); 
jQuery(".navbar .toggle.active > ul").css('display', 'block');

However, you may run into some timing issues with this. It's not the best practice, to wrap it in jQuery(window).on, however it will get the job done:

jQuery(window).on('load', null, {}, function () { 
    jQuery(".navbar .toggle.active > .nav-link").addClass('open'); 
    jQuery(".navbar .toggle.active > ul").css('display', 'block'); 
});

Normally, it should run synchronously, but for the sake of getting it to work, using window.onload will run this code when everything is finished loading, where we can safely assume that your menu will be ready to accept this code. So this may run much later (we're talking milliseconds), after the menu is initially setup up and ready for this code.

Upvotes: 2

kkiran
kkiran

Reputation: 57

in CSS you can show/hide div when menu item is active

Upvotes: 0

Rituraj ratan
Rituraj ratan

Reputation: 10378

use event.preventDefault()

  // Handle clicking on the naviagtion dropdown items
      jQuery('.navbar .toggle > a').click(function(e) {
    e.preventDefault();
        if (!jQuery(this).next().is(":visible")) {
          jQuery('.toggle a').removeClass('open');
          jQuery('.toggle ul:visible').hide();
        }
        jQuery(this).toggleClass('open');
        jQuery(this).next().slideToggle();
      });

reference event.preventDefault()

Upvotes: 0

Related Questions