jQuery - Confused between "Selectors" and strings passed as selectors
<p>I have the following code that I wrote, which I personally found to be pretty nice. It takes a <code>&lt;ul&gt;</code> and it drops down the contents when clicked. But I am having a disconnect here in comprehension, and one I had to do what I feel is a 'dirty hack' to solve.</p>

<p>The problem is that I do not want the class `'sidebar-dropdown-open' to be so 'hardwired' in the plugin. However I discovered that there is a very stark difference between...</p>

<p><code>$('.sidebar-dropdown-open')</code> and <code>'sidebar-dropdown-open</code> and even <code>'.sidebar-dropdown-open</code>.</p>

<p>I 'solved' this problem by including two different 'parameters' in my plugin, but I was wondering if someone might give me some insight as to how I could perform this better, and why this was behaving this way.</p>

<h1>wiring (document load)</h1>

<pre><code>$(document).ready(function () {
                $('[data-role="sidebar-dropdown"]').drawer({
                    open: 'sidebar-dropdown-open',
                    css: '.sidebar-dropdown-open'
                });
        });
</code></pre>

<h1>html</h1>

<pre><code>&lt;ul&gt;
    &lt;li class=" dropdown" data-role="sidebar-dropdown"&gt;
        &lt;a href="pages/.." class="remote"&gt;Link Text&lt;/a&gt;
        &lt;ul class="sub-menu light sidebar-dropdown-menu"&gt;
            &lt;li&gt;&lt;a class="remote" href="pages/..."&gt;Link Text&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a class="remote" href="pages/..."&gt;Link Text&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a class="remote" href="pages/..."&gt;Link Text&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<h1>javascript</h1>

<pre><code>(function ($) {
    $.fn.drawer = function (options) {
        // Create some defaults, extending them with any options that were provided
        var settings = $.extend({
            open: 'open',
            css: '.open'
        }, options);

        return this.each(function () {
            $(this).on('click', function (e) {
                // slide up all open dropdown menus
                $(settings.css).not($(this)).each(function () {
                    $(this).removeClass(settings.open);
                    // retrieve the appropriate menu item
                    var $menu = $(this).children(".dropdown-menu, .sidebar-dropdown-menu");
                    // slide down the one clicked on.
                    $menu.slideUp('fast');
                    $menu.removeClass('active');
                });


                // mark this menu as open
                $(this).addClass(settings.open);

                // retrieve the appropriate menu item
                var $menu = $(this).children(".dropdown-menu, .sidebar-dropdown-menu");
                // slide down the one clicked on.
                $menu.slideDown(100);
                $menu.addClass('active');
                e.preventDefault();
                e.stopPropagation();

            }).on("mouseleave", function () {
                $(this).children(".dropdown-menu").hide().delay(300);
            });

        })
    };

})(jQuery);
</code></pre>
