Question

I’m working on a site someone else developed. They used the following jQuery code to produce the drop down in the menu:

        <script type="text/javascript">

            var site_menu_categories_tID = null;
            $(document).ready(
                function(){
                    $("#site-menu-categories").click(
                        function(){
                            self = $(this);
                            $(".submenu-holder").show();
                        }
                    );
                    $("#site-menu-categories").mouseleave(
                        function(){
                            site_menu_categories_tID = setTimeout(function(){
                                $(".submenu-holder").trigger('mouseleave');
                                clearTimeout(site_menu_categories_tID);
                                site_menu_categories_tID=null;
                            },500);
                        }
                    );
                    $(".submenu-holder").mouseenter(
                        function(){
                            if(site_menu_categories_tID!=null){
                                clearTimeout(site_menu_categories_tID);
                                site_menu_categories_tID=null;
                            }
                        }
                    );
                    $(".submenu-holder").mouseleave(
                        function(){
                            self = $(this);
                            self.hide();
                        }
                    );
                }
            );
        </script>

It works fine in firefox but not in any of the IE’s (8 and below haven’t tested in 9). Are there any apparent errors that you can see?

Answer 1

To avoid cluttering the global scope, get rid of the first self = $(this); and add var to the second one or simply replace those two lines with $(this).hide();

Apparently IE doesn’t like you naming a global variable self.