jQuery, $(document) is catching things I do not want it to
<p>I have a dropdown menu system setup such as this...</p>

<p>This is the scripting section of the HTML page.</p>

<pre><code>    $('.ui-dropdown').each(function () {
        $(this).dropdown();
    });
</code></pre>

<p>Then in the actual HTML...</p>

<pre><code>            &lt;li class="ui-dropdown"&gt;
                &lt;a href="#"&gt;Dropdown Menu&lt;/a&gt;
                &lt;div&gt;
                    Test
                &lt;/div&gt;
            &lt;/li&gt;
</code></pre>

<p>It works very simply. the <code>div</code> is set to <code>display: none;</code>. Then there are methods in the jQuery plugin.</p>

<pre><code>    // drop the menu down so that it can be seen.
    function drop(e) {
        // show the menu section.
        options.menu.show();
    }

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

<p>Now, this works okay, but I want the menu to vanish when someone clicks anywhere other than the components inside of the <code>div</code> or the menu's triggering button. To try and fix that approach, I added this code.</p>

<pre><code>$(document).click(lift);
</code></pre>

<p>This works, a little too well. It is catching (obviously) everything, including clicks to the button, the menu, etc. So I tried to fix it with the following functions.</p>

<p>options is defined as follows.</p>

<pre><code>    options.button = $(this);
    options.menu = $(this).find('&gt; div');
    options.links = $(this).find('&gt; a');

    options.button.click(function (e) {
        options.menu.is(':visible') ? lift() : drop();
        e.stopPropogation(); // prevent event bubbling
    });

    options.links.click(function (e) {
        e.stopPropagation(); //prevent event bubbling
    });

    options.menu.click(function (e) {
        e.stopPropagation(); // prevent event bubbling
    });
</code></pre>

<p>But still no avail. How can I get <code>$(document).click(lift)</code> to be ignored when the menu I am wishing to be interacted with is clicked upon?</p>

<hr>

<p>Below is the entire jQuery Plugin, just for reference.</p>

<pre><code>jQuery.fn.dropdown = function () {
    var defaults = {
        class: 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.class = '.' + $(this).attr('class');
        options.list = $(this); // keep a constant reference to the root.
        options.button = $(this).find('&gt; a');
        options.menu = $(this).find('&gt; 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.class) || $target.closest(options.class).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');
        }
    });
};
</code></pre>
