Closing toggled menu after clicking (one pager)

  • Hi guys,

    I am new here and urgently need your help with my little problem. After a long search on the internet, I unfortunately found nothing because I am not a great programmer either.

    I have a dropdown menu on my wordpress page and after clicking on the desired (#section) everything works except that the menu closes by itself … (its important also for the mobile version)

    Enclosed the code from the functions.js (i dont know witch menu this is…)

            if ($('.sidebar-static')) {
            $('.sidebar-left .menu-action').on('click', function () {
                $('.sidebar-static').toggleClass('active');
                    $('.menu-action').toggleClass('closes');
                    $('.site-main').toggleClass('active');
                              
            });
            $("#main").on('click', function () {
                if ($(this).parents("body").find(".sidebar-static").hasClass('active')) {
                    $(".sidebar-static").removeClass('active');
                        $(".menu-action").removeClass('closes');
                        $(".site-main").removeClass('active');
                }
            });
            $("#leftmenu li a").on('click', function () {
                if ($(this).parents("body").find(".sidebar-static").hasClass('active')) {
                    $(".sidebar-static").removeClass('active');
                        $(".menu-action").removeClass('closes');
                        $(".site-main").removeClass('active');
                       
                }
            });
        }

			(function($) {
				$( "#main" ).click(function() {
					$( ".menu-action" ).trigger( "click" );
				});
			});

        $('.session-menu > li > a[href^="#"]').on('click', function(e){
            e.preventDefault();
            $('.session-menu > li').removeClass('active');
            var $this = $(this);
            var topheight = 0;
            if($('#opal-masthead.has-sticky.keeptop').length > 0){
                topheight = $('#opal-masthead.has-sticky.keeptop').outerHeight();
            }
            var $parent = $this.parent();
            $parent.addClass('active');
            var target = this.hash;
            var $target = $(target);
            $('html, body').animate({
                'scrollTop': $target.offset().top - topheight
            }, 1000, 'swing');
        })

        if ($('.top-header-menu')) {
            $('.top-header-menu .menu-action').on('click', function () {
                $('.sidebar-static').toggleClass('active');
                $('.menu-action').toggleClass('closes');
                $('.site-main').toggleClass('active');
            });
            $("#main").on('click', function () {
                if ($(this).parents("body").find(".sidebar-static").hasClass('active')) {
                    $(".sidebar-static").removeClass('active');
                    $(".menu-action").removeClass('closes');
                    $(".site-main").removeClass('active');
                }
            });
        }

    I appreciate any help!

    • This topic was modified 4 years, 8 months ago by bcworkz. Reason: code fixed
Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    I’m unclear what you are after. Do you want it to close or to not close? It looks like the code block that starts with
    $("#leftmenu li a").on('click', function () {
    should close the menu when an item is clicked. If you want the menu to stay open, try making the entire code block into a comment (with /* [code] */ delimiters. If you want it to close and it's is not, check your browser console for script errors.

    Thread Starter bartek11

    (@bartek11)

    Hello,

    I want that the “dropdown-menu” close after clicking on the item. Nothing is working…

    Thanks!

    Moderator bcworkz

    (@bcworkz)

    I think the browser jumps before the close menu code can execute. Collect the click event in the anonymous function so you can call its .preventDefault() method to stop the jump so the remaining code can execute. After the code to close executes you can have the script make the jump by setting window.location.hrefor by unbinding the event handler and having script click the link.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Closing toggled menu after clicking (one pager)’ is closed to new replies.