jQuery toggle doesn't stay down?

[dmhall0]

I am using the jQuery toggle function to display a menu when the user clicks on an image.

The menu starts off hidden but when I click on the image it appears correctly, lasts less than 1 second, and then hides again.

 

Here is my js/jquery code:

 

<script type="text/javascript" src="'.base_url().'assets/jquery/js/jquery-1.7.2.min.js"></script>
             <script type="text/javascript" src="'.base_url().'assets/jquery/js/jquery-ui-1.8.21.custom.min.js"></script>
             <script type="text/javascript">
             $("document").ready(function() {
               $("#user_menu").hide();
               $("a.menu_title").click(function()
               {
                 $("#user_menu").toggle();
               });
             });</script>

 

Any ideas why this is happening?

Thanks!

[dmhall0]

Nevermind... I figured it out.

Stupid mistake on my part.

I set the image as a link and had href="" so it was reloading the page, thus show then hide again when the page would reload.

[xyph]

You can avoid this by using preventDefault

 

http://api.jquery.com/event.preventDefault/