1

私が書いた次のコードがありますが、個人的にはかなりいいと思います。<ul>クリックすると内容がドロップダウンします。しかし、私はここで理解が途切れています。私が感じたことをしなければならなかったのは、解決する「汚いハック」です。

問題は、クラス `'sidebar-dropdown-open' をプラグインで「ハードワイヤード」にしたくないことです。しかし、私は非常に大きな違いがあることを発見しました...

$('.sidebar-dropdown-open')と'sidebar-dropdown-openさえ'.sidebar-dropdown-open。

プラグインに2つの異なる「パラメータ」を含めることでこの問題を「解決」しましたが、これをより適切に実行する方法と、なぜこのように動作するのかについて、誰かが私に洞察を与えるのではないかと思っていました.

配線（ドキュメントロード）

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

1 に答える 1

4

jQuery セレクターは css セレクターとまったく同じようにスタイル設定されているため、デザイナーと開発者の両方にとって習得が非常に簡単です。私の意見では、パラメーターを 1 つだけ使用し、それをセレクターではなくクラス名にする必要があります。それがセレクターの場合、代わりに ID セレクターまたはより複雑なセレクターを使用してコードを壊す可能性があるためです。

于 2012-12-05T20:43:49.203 に答える