Question

I have a simple click and show, click and hide sidebar menu , but when I click it, the page anchors at the top of the page. Is there anyway to prevent this? So that when I click on the menu, the page should stay at the same place in the browser?

(function ($) {
$.fn.SidebarMenu = function () {
    return this.each(function () {
        var menu = $(this);
        menu.find('ul li ul.active').slideDown('medium');
        menu.find('ul li > a').bind('click', function (event) {
            var ahref = $(event.currentTarget).attr('href');
            if (ahref != '#') {
                window.location.href = ahref;
            } else {
                var currentlink = $(event.currentTarget);
                if (currentlink.parent("li").find('ul.active').size() == 1) {
                    currentlink.parent("li").find('ul.active').slideUp('medium', function () {
                        currentlink.parent("li").find('ul.active').removeClass('active');
                        currentlink.removeClass('sidebar_container_content_li_arrowdown');
                        currentlink.addClass('sidebar_container_content_li_arrowup');
                    });
                }
                else {
                    show(currentlink);
                }
            }
        });
        function show(currentlink) {
            currentlink.parent().find('ul').addClass('active');
            currentlink.removeClass('sidebar_container_content_li_arrowup');
            currentlink.addClass('sidebar_container_content_li_arrowdown');
            currentlink.parent().find('ul').slideDown('medium');
        }
    });
}
})(jQuery);

thanks.

Answer 1

Try Event.preventDefault, http://api.jquery.com/event.preventDefault