CODEWITHSUNDEEP
javascriptjquerywordpressmenutoggle
54v4nn4h
54v4nn4h

Reputation: 1

jQuery menu should stay opem

I am running a Wordpress on twenty fifteen child theme. I found a Script to toggle menu on mouseover. I really like that feature. But I want to add following option: When the user is on childpage of parent1, I want the menu to be open on this point, as it is by default in twentyfifteen. You can see it here: http://johannabaschke.de/impressum/

I now want that also with the script I found:

<script>
  var $ =jQuery.noConflict();
   $(document).ready(function () {
   $('.sub-menu').hide();
   $('.menu-item-has-children').hover(function() {
   $(this).children('.sub-menu').stop().slideToggle(200);
     });
   });
</script>

It toggles menu on mousover, but when clicking child-page, the menu isnt open, like here:

http://johannabaschke.de/transeuropa-2015/

I am not good in coding, thats why I only modify WP-themes with CSS which I am good at, but Javascript is not my bet practice. Maybe someone has a simple idea to solve this?

Would be super glad and thx for your help!

54v4nn4h

Upvotes: 0

Views: 42

Answers (2)

vijayP
vijayP

Reputation: 11502

Could you please try following code:

<script>
    var $ =jQuery.noConflict();
    $(document).ready(function () {
        $('.sub-menu').hide();
        $('.menu-item-has-children').hover(function() {
            $(this).children('.sub-menu').stop().slideToggle(200);
        });

        //code to keep open respective menu open on page load
        $("a[href='"+window.location.href+"']").closest('.sub-menu').stop().slideToggle(200);
   });
</script>

Upvotes: 1

Mohod Sandhya
Mohod Sandhya

Reputation: 450

Please try like this:

<script>
  var $ =jQuery.noConflict();
   $(document).ready(function () {
   $('.sub-menu').hide();
   $('.menu-item-has-children').click(function() {
   $(this).children('.sub-menu').stop().slideToggle(200);
     });
   });
</script>

Upvotes: 1

Related Questions