Show a sub-menu using JQuery

Question

I need some help making a sub-menu appear within 2s after the page loads instead of when the user clicks on it. I'm using JQuery. That file is the core of the website. I need it to stay opened.

Here's the code I have at the moment, I tried to change that on.Click event but it didn't work.

The handleSidenarAndContentHeight(); function resizes the menu items after the sub-menu appears.

jQuery('.page-sidebar li > a').on('click', function (e) {
    if ($(this).next().hasClass('sub-menu') === false) {
        return;
    }
    var parent = $(this).parent().parent();
    parent.children('li.open').children('a').children('.arrow').removeClass('open');
    parent.children('li.open').children('a').children('.arrow').removeClass('active');
    parent.children('li.open').children('.sub-menu').slideUp(350);
    parent.children('li').removeClass('open');
    parent.children('li').removeClass('active');

    var sub = jQuery(this).next();
    if (sub.is(":visible")) {
        jQuery('.arrow', jQuery(this)).removeClass("open");
        jQuery(this).parent().removeClass("active");
        sub.slideUp(350, function () {
            handleSidenarAndContentHeight();
        });
    } else {
        jQuery('.arrow', jQuery(this)).addClass("open");
        jQuery(this).parent().addClass("open");
        sub.slideDown(350, function () {
            handleSidenarAndContentHeight();
        });
    }

    e.preventDefault();
});

By the way, are you familiar with the method find of jQuery? Instead of writing parent.children('li.open').children('a').children('.arrow') you can use find like this: parent.find('li.open a .arrow') or you can skip on the a tag: parent.find('li.open .arrow'). Just for you know.. — Mosh Feu
– Mosh Feu, Commented Mar 2, 2017 at 9:23

coderocket · Accepted Answer · 2017-03-02 09:03:00Z

3

Working with a 2 second timeout should do the trick!

jQuery(document).ready(function(){
  // Open Parent here

  setTimeout(function(){
    // Open Child here
  }, 2000)
});

answered Mar 2, 2017 at 9:03

coderocket

5843 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lucaz Nunes Over a year ago

That's great, but should I add the whole code inside of the document.ready { ? I'm kinda new to Javascript, sorry for those lazy questions

coderocket Over a year ago

@LucazNunes It depends on you. You should wrap your functions calls inside the $(document).ready(). If not, your code could run before the elements are placed in the DOM. It's just to make sure that everything is ready and in place.

Niku Hysa · Accepted Answer · 2017-03-02 09:41:22Z

1

There is a simple javascript function you can use, the setTimeout function.

The code follows like this :

setTimeout(function() {yourFunctyion();}. delayTimeInMiliseconds);

This will call your function after the number of second(in ms).

There is also a plugin I've used. It has oneTime and everyTime methods.

jQuery timers plugin

answered Mar 2, 2017 at 9:41

Niku Hysa

762 silver badges12 bronze badges

Collectives™ on Stack Overflow

Show a sub-menu using JQuery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related