1

私は次のプラグインを書きました - そしてそれは完全に動作します。すべての状況でやりたいことを正確に実行しますが、少し遅いです。パフォーマンスを劇的に向上させる方法を誰かが見つけたかどうか、より賢明なコミュニティに委ねようと思いました。

基本的に、それは構造化ulされ、ステレオタイプのドロップダウン/ドロワー機能を作成します。また、期待される HTML のスニペットも投稿しています。

警告 - 使用しているアイテムの数を示したいので、非常に大量の HTML を含めています。これにより、遅い理由がわかります。

速度が低下しているのは、処理するように指示している途方もない量のアイテムが原因であると確信しています. しかし、いずれかがクリックされたときに他のすべてのメニューを折りたたむようにしたいので、それらをすべて添付する必要があります。

繰り返しますが、ここで見られる動作はまさに正しいものです。jsFiddle も含めているので、動作を確認できます。

jsFiddle リンク (動作中)

jQuery Wiring (ドキュメントの読み込み)

$(document).ready(function() {
    $(".dropdown > a").addClass("root");

    var $sidebar_dropdown = $('li[data-role="sidebar-dropdown"]');
    var $submenu_dropdown = $('li[data-role="sidebar-sub-dropdown"]');
    var $remote_menus = $('a.remote');

    $sidebar_dropdown.drawer({
        openClass: 'sidebar-dropdown-open'
    });
    $submenu_dropdown.drawer({
        openClass: 'sidebar-sub-dropdown-open'
    });

});

実際のプラグイン (Javascript)

(function ($) {
    $.fn.drawer = function (options) {
        // Create some defaults, extending them with any options that were provided
        var settings = $.extend({
            openClass: 'open',
            openClassName: function () { return '.' + this.openClass; }
        }, options);

        var open = function (e) {
            // mark this menu as open
            $(e).addClass(settings.openClass);

            // retrieve the appropriate menu item
            var $menu = $(e).children(".dropdown-menu, .sidebar-dropdown-menu");

            // slide down the one clicked on.
            $menu.slideDown(100);
            $menu.addClass('active');
        };

        var close = function (e) {
            $(e).removeClass(settings.openClass);
            // retrieve the appropriate menu item
            var $menu = $(e).children(".dropdown-menu, .sidebar-dropdown-menu");
            // slide down the one clicked on.
            $menu.slideUp('fast');
            $menu.removeClass('active');
        };

        return this.each(function () {
            $(this).on('click', function (e) {
                // transform the selector into a 'className'
                var $className = $('.' + settings.openClass);
                var $node = $(this); // the current node
                var $target = $(e.target); // the actual DOM target
                // examine all existing dropdown menus that are
                // currently open, and close them - excluding the
                // current one.
                $className.not($(this)).each(function () {
                    close($(this));
                });

                if ($target.hasClass("root") && $node.hasClass(settings.openClass)) {
                    close($(this));
                }
                else {
                    // open the selected dropdown menu
                    open($(this));
                }

                // prevent default event propogation
                e.preventDefault();
                e.stopPropagation();
            }).on("mouseleave", function () {
                $(this).children(".dropdown-menu").hide().delay(300);
            });

        })
    };

})(jQuery);

HTML

<div class="page-sidebar">
<ul>
    <li class="dropdown" data-role="sidebar-dropdown">
        <a href="#" class="remote">Test Menu Item</a>
        <ul class="sub-menu light sidebar-dropdown-menu">
            <li><a class="remote" href="#">Test Menu Item</a></li>
            <li><a class="remote" href="#">Test Menu Item</a></li>
            <li><a class="remote" href="#">Test Menu Item</a></li>
        </ul>
    </li>
    <li class="dropdown" data-role="sidebar-dropdown">
        <a href="#" class="remote">Test Menu Item</a>
        <ul class="sub-menu light sidebar-dropdown-menu">
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
        </ul>
    </li>
    <li class=" dropdown" data-role="sidebar-dropdown">
        <a href="#" class="remote">Test Menu Item</a>
        <ul class="sub-menu light sidebar-dropdown-menu">
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
        </ul>
    </li>
    <li class=" dropdown" data-role="sidebar-dropdown">
        <a href="#" class="remote">Test Menu Item</a>
        <ul class="sub-menu light sidebar-dropdown-menu">
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
        </ul>
    </li>
    <li class=" dropdown" data-role="sidebar-dropdown">
        <a href="#" class="remote">Test Menu Item</a>
        <ul class="sub-menu light sidebar-dropdown-menu">
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
        </ul>
    </li>
    <li class=" dropdown" data-role="sidebar-dropdown">
        <a href="#" class="remote">Test Menu Item</a>
        <ul class="sub-menu light sidebar-dropdown-menu">
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
        </ul>
    </li>
    <li class=" dropdown" data-role="sidebar-dropdown">
        <a href="#" class="remote">Test Menu Item</a>
        <ul class="sub-menu light sidebar-dropdown-menu">
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
        </ul>
    </li>

    <li class=" dropdown" data-role="sidebar-dropdown">
        <a href="#" class="remote">Test Menu Item</a>
        <ul class="sub-menu light sidebar-dropdown-menu">
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
        </ul>
    </li>
    <li class=" dropdown" data-role="sidebar-dropdown">
        <a href="#" class="remote">Test Menu Item</a>
        <ul class="sub-menu light sidebar-dropdown-menu">
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
        </ul>
    </li>
    <li class=" dropdown" data-role="sidebar-dropdown">
        <a href="#" class="remote">Test Menu Item</a>
        <ul class="sub-menu light sidebar-dropdown-menu">
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
        </ul>
    </li>
    <li class=" dropdown" data-role="sidebar-dropdown">
        <a href="#" class="remote">Test Menu Item</a>
        <ul class="sub-menu light sidebar-dropdown-menu">
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
        </ul>
    </li>
    <li class=" dropdown" data-role="sidebar-dropdown">
        <a href="#" class="remote">Test Menu Item</a>
        <ul class="sub-menu light sidebar-dropdown-menu">
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
        </ul>
    </li>
    <li class=" dropdown" data-role="sidebar-dropdown">
        <a href="#" class="remote">Test Menu Item</a>
        <ul class="sub-menu light sidebar-dropdown-menu">
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
        </ul>
    </li>
    <li class=" dropdown" data-role="sidebar-dropdown">
        <a href="#" class="remote">Test Menu Item</a>
        <ul class="sub-menu light sidebar-dropdown-menu">
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
            <li><a href="#" class="remote">Test Menu Item</a></li>
        </ul>
    </li>
    <li class=" dropdown" data-role="sidebar-dropdown">
        <a href="#" class="remote">Test Menu Item</a>
        <ul class="sub-menu light sidebar-dropdown-menu">
            <li class="dropdown" data-role="sidebar-sub-dropdown">
                <a href="#" class="remote">Test Menu Item</a>
                <ul class="sub-menu light sidebar-dropdown-menu">
                    <li><a href="#" class="remote">
                            Test Menu Item,
                            <br />
                            <small>Test Menu Item Small</small>
                        </a>
                    </li>
                    <li><a href="#" class="remote">
                            Test Menu Item,
                            <br />
                            <small>Test Menu Item Small</small>
                        </a>
                    </li>
                    <li><a href="#" class="remote">Test Menu Item</a></li>
                    <li><a href="#" class="remote">Test Menu Item</a></li>
                    <li><a href="#" class="remote">Test Menu Item</a></li>
                    <li><a href="#" class="remote">Test Menu Item</a></li>
                    <li><a href="#" class="remote">Test Menu Item</a></li>
                </ul>
            </li>
            <li class="dropdown" data-role="sidebar-sub-dropdown">
                <a href="#" class="remote">Test Menu Item</a>
                <ul class="sub-menu light sidebar-dropdown-menu">
                    <li><a href="#" class="remote">Test Menu Item</a></li>
                    <li><a href="#" class="remote">Test Menu Item</a></li>
                    <li><a href="#" class="remote">Test Menu Item</a></li>
                    <li><a href="#" class="remote">Test Menu Item</a></li>
                    <li><a href="#" class="remote">Test Menu Item</a></li>
                </ul>
            </li>
            <li class="dropdown" data-role="sidebar-sub-dropdown">
                <a href="#" class="remote">Test Menu Item</a>
                <ul class="sub-menu light sidebar-dropdown-menu">
                    <li><a href="#" class="remote">Test Menu Item</a></li>
                    <li><a href="#" class="remote">Test Menu Item</a></li>
                </ul>
            </li>
            <li class="dropdown" data-role="sidebar-sub-dropdown">
                <a href="#" class="remote">Test Menu Item</a>
                <ul class="sub-menu light sidebar-dropdown-menu">
                    <li><a href="#" class="remote">Test Menu Item</a></li>
                    <li><a href="#" class="remote">Test Menu Item</a></li>
                </ul>
            </li>
            <li class="dropdown" data-role="sidebar-sub-dropdown">
                <a href="#" class="remote">Test Menu Item</a>
                <ul class="sub-menu light sidebar-dropdown-menu">
                    <li><a href="#" class="remote">Test Menu Item</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</div>​

CSS

.page-sidebar {
    display: block;
    width: 213px;
    float: left;
    min-height: 100% !important;
    height: auto;
    background-color: #EBEBEB;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 10px;
    margin-left: 7px;
}
.page-sidebar ul.sub-menu.light {
    background-color: #F9F9F9 !important;
}
.page-sidebar ul.sub-menu {
    padding-top: 5px;
    padding-bottom: 5px;
}
.page-sidebar .sidebar-dropdown-menu {
    display: none;
}
.page-sidebar ul {
    margin-left: 0;
    list-style: none;
    background-color: #EBEBEB;
}
.page-sidebar > ul > li > a {
    font-size: 1.1em;
}
.page-sidebar > ul > li.dropdown {
    position: relative;
}
.page-sidebar li {
    display: list-item;
    line-height: 20px;
    position: relative;
}
.dropdown, .dropdown > a {
    font-weight: 600 !important;
}
ul li, ol li {
    display: list-item;
    font-size: 14px;
    line-height: 20px;
}
.dropdown, .dropdown > a {
    font-weight: 600 !important;
}
.page-sidebar a {
    font-family: 'Almendra', 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 11pt;
    letter-spacing: 0.01em;
    line-height: 14pt;
    color: black;
    display: block;
    width: 100%;
    padding: 5px 20px 5px 10px;
    white-space: nowrap;
    font-size: 14px;
    cursor: pointer;
}
a, .link {
    font-family: 'Almendra', 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 11pt;
    color: #2E92CF;
    text-decoration: none;
}
.page-sidebar > ul > li.dropdown::after {
    content: "";
    display: block;
    position: absolute;
    top: 6px;
    left: 100%;
    margin-left: -20px;
    width: 16px;
    height: 16px;
    background: no-repeat;
    background-position: 0 -1586px;
    z-index: 200;
}

</p>

4

1 に答える 1

0

私は状況を理解しようとします。私はあなたのプラグインを閲覧していました、そしてそれはよさそうです。まさにそれが遅いのですか？アコーディオン効果は遅いですか？

于 2012-12-27T04:16:10.467 に答える