ansaurus

Question

IE only jQuery bug

Answer 1

A:

Maybe this can point you in the right direction.

You don't need a return this.each(function() {}); since you are already passing the DOM element in the plug-in aka "gMenu" you just work from there on.

For brevity I left out a lot of code and minimized it to the features that matter.

Also you don't want to hide other opened menu items, since it breaks common patterns in UI design.

(function($){

    $.fn.gMenu = function(options) {

        var o = $.extend({
            speed: "fast"
        }, options);

        $('ul', this).not('.gm-active ul').hide();

        $('a', this).click(function(){

            $(this).next().slideToggle(o.speed);

        });

        return this;

    };
})(jQuery);

JeremySpouken 2010-06-01 20:00:23

Appreciate the heads up Jeremy, but that doesn't seem to be the issue.As for "common patterns in UI design", I'm more concerned about the individual user experience than conforming to imaginary best practices that, for this type of user control, hardly falls into the category of established. This design is based on actual user testing, so I'm quite confident it's the right design decision.But I digress. I'm at a loss as to what's causing this bug. The first toggler seems to be the only one getting any love in IE, and once toggled, it controls the last sub menu and the last sub menu only

Greg-J 2010-06-01 20:15:29

Answer 2

A:

Solution found.

The issue was that I wasn't specifically cycling through each list element found. I reworked the jQuery a bit to put everything inside an $.each() function and now all seems well. I'm not sure if this is the most efficient way of doing it now though, so if anyone see's any room for improvement, please let me know.

http://jsbin.com/edago3/8/

 (function($){

    $.fn.extend({

        gMenu: function (options) {

            var o = $.extend({
                speed: "fast"
            }, options);

            // Get this ul's decendant ul's
            var $ul = $('ul', this);

            // Hide decendant ul's that are not active
            $ul.not('.gm-active ul').hide();

            // loop through this lists list elements
            $.each($(this).children('li'), function(){

                // Create toggler elements for the first decendant li's only
                $(this).children('a').after(
                  $('<span>', { html: "toggle", 'class': "gm-toggler"})
                );

                // find the togglers and hide them
                var $toggler = $(this).find('.gm-toggler').hide();

                // Only show the toggler when a menu item is hovered
                $(this).hover(function(){
                   $('.gm-toggler', this).toggle();
                });

                // Only show one child menu at a time. Never collapse them all
                $($toggler, this).click(function(){

                    // get this togglers parent ul
                    var $current = $(this).parent().find('ul');

                    // slide all other child menu up and remove its .active class
                    $($ul).not($current).slideUp(o.speed)
                        .parent().removeClass('gm-active');

                    // Stop sliding this togglers menu if it is animating and slide it the other direction
                    $current.stop(false,true).slideToggle(o.speed);

                    // If this togglers menu is active ...
                    $(this).parent('li').toggleClass('gm-active');
                });
            });
        }
    });
})(jQuery);

Greg-J 2010-06-01 21:09:12

I was just getting back to this, and the only thing I noticed so far was that the "click" event was triggering 10+ times on every click in IE, but only once in other browsers.

Ryley 2010-06-01 21:20:17

ansaurus

tags:

views:

answers:

IE only jQuery bug

related questions