jQuery - "Selectors"和作为选择器传递的字符串之间混淆

Question

我编写了以下代码，我个人认为它非常好。需要 <ul>单击时它会下拉内容。但我在理解上遇到了脱节，我必须做我认为是“肮脏的黑客”才能解决的问题。

问题是我不希望类“sidebar-dropdown-open”在插件中如此“硬连线”。然而我发现两者之间存在着非常明显的区别......

$('.sidebar-dropdown-open')和'sidebar-dropdown-open甚至 '.sidebar-dropdown-open .

我通过在插件中包含两个不同的“参数”来“解决”这个问题，但我想知道是否有人可以给我一些关于如何更好地执行此操作以及为什么会出现这种情况的见解。

接线(文档加载)

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

html

<ul>
    <li class=" dropdown" data-role="sidebar-dropdown">
        <a href="pages/.." class="remote">Link Text</a>
        <ul class="sub-menu light sidebar-dropdown-menu">
            <li><a class="remote" href="pages/...">Link Text</a></li>
            <li><a class="remote" href="pages/...">Link Text</a></li>
            <li><a class="remote" href="pages/...">Link Text</a></li>
        </ul>
    </li>
</ul>

javascript

(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);

Answer 1

jQuery 选择器的样式与 CSS 选择器完全相同，这使得设计人员和开发人员都非常容易学习。在我看来，你应该只使用一个参数，并要求它是一个类名，而不是一个选择器，因为如果它是一个选择器，有人可能会认为他们可以使用 ID 选择器或更复杂的选择器，这会破坏你的代码。