jQuery Code Errors in IE, but no other browser.

Question

I have the following code snippet..

I get the error

Expected identifier, string or number

on the line...

    options.reference = '.' + $(this).attr('class');

and then later in the plugin...

Object doesn't support this property or method

on the line...

        if ($target.is(options.reference) || $target.closest(options.reference).length)
            return false;

These cause no problems in any browser but IE. It is IE8, as well, not 6. Below is the ENTIRE plugin, for reference.

jQuery.fn.dropdown = function () {
    var defaults = {
        reference: null,
        button: null,
        menu: null
    };
    return this.each(function () {

        // initialize options for each dropdown list, since there
        // very well may be more than just one.
        var options = $.extend(defaults, options);

        // specifically assign the option components.
        options.reference = '.' + $(this).attr('class');
        options.list = $(this);
        options.button = $(this).find('> a');
        options.menu = $(this).find('> div');

        // bind the lift event to the document click.
        // This will allow the menu to collapse if the user
        // clicks outside of it; but we will stop event bubbling to
        // keep it from being affected by the internal document links.
        $(document).click(function (e) {
            var $target = $(e.target);

            // check to see if we have clicked on one of the dropdowns, and if so, dismiss
            // the execution. We only want to lift one if we're not trying to interact with
            // one.
            if ($target.is(options.reference) || $target.closest(options.reference).length)
                return false;

            lift(e);
        });

        // when the button is clicked, determine the state of the
        // dropdown, and decide whether or not it needs to be lifted
        // or lowered.
        options.button.click(function (e) {
            options.menu.is(':visible') ? lift() : drop();
            e.stopPropogation(); // prevent event bubbling
        });

        // drop the menu down so that it can be seen.
        function drop(e) {
            // show the menu section.
            options.menu.show();
            // style the button that drops the menu, just for aesthetic purposes.
            options.list.addClass("open");
        }

        // lift the menu up, hiding it from view.
        function lift(e) {
            if (!options.menu.is(':visible'))
                return;
            options.menu.hide();

            // style the button that drops the menu, just for aesthetic purposes.
            options.list.removeClass('open');
        }
    });
};

Answer 1

That plugins is poorly designed, if the element has more than one class, $(this).attr('class') will return an string like this .class1 class2 classN which breaks the plugin.

It's not an IE issue, it's bad code.