2

我有 2 个 Jquery 插件，我想将它们组合成一个而不丢失任何功能。我试过但代码停止工作我想我可能做错了。请帮我。

插件代码1：

!(function ($) {
    jQuery.fn.menuify = function (settings) {
        var config = { seperator: "_", class: "blogger-menu" };

        if (settings) jQuery.extend(config, settings);

        this.each(function () {
            // element-specific code here
            let ul = document.createElement("ul");
            let parentLi = [];
            let findChild = $(this).find("li a");
            let regex = RegExp(config.seperator, "g");
            ul.className = config.class;
            $(findChild).each(function () {
                let link = $(this).attr("href");
                let level = ($(this).text().match(regex) || []).length;
                if (level === 0) {
                    let li = document.createElement("li");
                    let a = document.createElement("a");
                    a.innerHTML = $(this).text();
                    a.href = link;
                    li.append(a);
                    parentLi[level + 1] = li;
                    ul.append(li);
                } else if (level > 0) {
                    let ul = document.createElement("ul");
                    let li = document.createElement("li");
                    let a = document.createElement("a");
                    a.innerHTML = $(this).text().replaceAll(config.seperator, "");
                    a.href = link;
                    li.append(a);
                    parentLi[level + 1] = li;
                    ul.append(li);
                    parentLi[level].append(ul);
                }
            });
            $(this).parent().html(ul);
        });

        return this;
    };
})(jQuery);

上面的代码将单级列表转换为多级无序列表。

插件代码 2： 第二个代码是manumaker.js 上面的代码将多级列表转换为响应式菜单栏，它有一些 CSS 代码。这段代码可以在这里看到

这些代码主要用于制作导航菜单。

4

1 回答 1

0

我猜你的问题来自这样一个事实，即你在一个插件上有变量 $ 并且在另一个分配给 jQuery 的 jQuery 上，它们都分配给了 $ 它应该可以工作：

        (function($) {

        $.fn.menuify = function (settings) {
            var config = { seperator: "_", class: "blogger-menu" };

            if (settings) $.extend(config, settings);

            this.each(function () {
                // element-specific code here
                let ul = document.createElement("ul");
                let parentLi = [];
                let findChild = $(this).find("li a");
                let regex = RegExp(config.seperator, "g");
                ul.className = config.class;
                $(findChild).each(function () {
                    let link = $(this).attr("href");
                    let level = ($(this).text().match(regex) || []).length;
                    if (level === 0) {
                        let li = document.createElement("li");
                        let a = document.createElement("a");
                        a.innerHTML = $(this).text();
                        a.href = link;
                        li.append(a);
                        parentLi[level + 1] = li;
                        ul.append(li);
                    } else if (level > 0) {
                        let ul = document.createElement("ul");
                        let li = document.createElement("li");
                        let a = document.createElement("a");
                        a.innerHTML = $(this).text().replaceAll(config.seperator, "");
                        a.href = link;
                        li.append(a);
                        parentLi[level + 1] = li;
                        ul.append(li);
                        parentLi[level].append(ul);
                    }
                });
                $(this).parent().html(ul);
            });

            return this;
        };

      $.fn.menumaker = function(options) {
          
          var cssmenu = $(this), settings = $.extend({
            title: "Menu",
            format: "dropdown",
            breakpoint: 768,
            sticky: false,
            menuify: true
          }, options);

          return this.each(function() {
            cssmenu.find('li ul').parent().addClass('has-sub');
            if (settings.format != 'select') {
              cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
              $(this).find("#menu-button").on('click', function(){
                $(this).toggleClass('menu-opened');
                var mainmenu = $(this).next('ul');
                if (mainmenu.hasClass('open')) { 
                  mainmenu.hide().removeClass('open');
                }
                else {
                  mainmenu.show().addClass('open');
                  if (settings.format === "dropdown") {
                    mainmenu.find('ul').show();
                  }
                }
              });

              multiTg = function() {
                cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
                cssmenu.find('.submenu-button').on('click', function() {
                  $(this).toggleClass('submenu-opened');
                  if ($(this).siblings('ul').hasClass('open')) {
                    $(this).siblings('ul').removeClass('open').hide();
                  }
                  else {
                    $(this).siblings('ul').addClass('open').show();
                  }
                });
              };

              if (settings.format === 'multitoggle') multiTg();
              else cssmenu.addClass('dropdown');
            }

            else if (settings.format === 'select')
            {
              cssmenu.append('<select style="width: 100%"/>').addClass('select-list');
              var selectList = cssmenu.find('select');
              selectList.append('<option>' + settings.title + '</option>', {
                                                             "selected": "selected",
                                                             "value": ""});
              cssmenu.find('a').each(function() {
                var element = $(this), indentation = "";
                for (i = 1; i < element.parents('ul').length; i++)
                {
                  indentation += '-';
                }
                selectList.append('<option value="' + $(this).attr('href') + '">' + indentation + element.text() + '</option');
              });
              selectList.on('change', function() {
                window.location = $(this).find("option:selected").val();
              });
            }

            if (settings.sticky === true) cssmenu.css('position', 'fixed');

            resizeFix = function() {
              if ($(window).width() > settings.breakpoint) {
                cssmenu.find('ul').show();
                cssmenu.removeClass('small-screen');
                if (settings.format === 'select') {
                  cssmenu.find('select').hide();
                }
                else {
                  cssmenu.find("#menu-button").removeClass("menu-opened");
                }
              }

              if ($(window).width() <= settings.breakpoint && !cssmenu.hasClass("small-screen")) {
                cssmenu.find('ul').hide().removeClass('open');
                cssmenu.addClass('small-screen');
                if (settings.format === 'select') {
                  cssmenu.find('select').show();
                }
              }
            };
            resizeFix();
            if (settings.menuify === true) $(cssmenu).menuify();
            return $(window).on('resize', resizeFix);

          });
      };
    })(jQuery);

编辑：我已经更改了一些代码以链接两个插件。现在调用 $.fn.menumaker 时，您可以选择是否调用 menuify。

$("#cssmenu").menumaker({
            title: "Menu - Mobile",              // The text of the button which toggles the menu
            breakpoint: 768,            // The breakpoint for switching to the mobile view
            format: "multitoggle",       // It takes three values: dropdown for a simple toggle menu, select for select list menu, multitoggle for a menu where each submenu can be toggled separately
            menuify: true //True by default
        });

请注意，我不确定您为什么要尝试使用 menuify 来实现，并且 2 个插件本身可能是计数器。

在不更改代码的情况下链接这两个插件的更简单方法也可能是这样的：

$('#cssmenu').menumaker().menuify();
于 2021-01-11T08:55:05.173 回答