CODEWITHSUNDEEP
javascriptresponsive-design
Adam Robertson
Adam Robertson

Reputation: 567

How would I trigger a javascript responsive menu to hide on click?

I'm using the following JS to show and hive a responsive-specific menu. Basically, when an h4 is clicked, a list with my my within #secondary-navigation slides down. I'm using this menu on a page with page anchors, so I'd like the menu to slideUp when one of the menu items is clicked. How would I go about accomplishing this with my code below? Thanks for any help.

            <script>
            (function($) {
                $(function() {
                    var header = $('h4', '#secondary-navigation');
                    header.click(function() {
                        if($(this).next().is(':hidden')) {
                            $(this).next().slideDown('fast');
                        } else {
                            $(this).next().slideUp('fast');
                        }
                    });
                });
            })(jQuery);
            </script><!-- end mobile nav -->

Upvotes: 0

Views: 231

Answers (1)

bobsoap
bobsoap

Reputation: 5104

Edit: I misread your question at first. You need to add a second function that triggers when one of the menu children is clicked. That's a separate event.

Assuming your menu items are wrapped in a div or ul with an id of #menu:

$('#menu a').click(function() {
    $('#menu').slideUp('fast');
});

Add this as a separate function, outside of the one you posted above.

Upvotes: 1

Related Questions