Question

我使用了一个名为jquery.rd-navbar.js的插件来获取我的桌面版导航栏，并将其变成一个很好的响应式移动菜单。唯一的问题是，如果有子菜单，代码永远不会访问插件，它们显示为普通菜单。有任何想法吗？问题是我构建了太多的CSS现在回去而不是使用插件。

/*
* Author: Evgeniy Gusarov StMechanus (Diversant)
* Under the MIT License
*
* Version: 1.0.1
*
*/


;
(function ($) {

  var settings = {
    cntClass: 'rd-mobilemenu',
    menuClass: 'rd-mobilemenu_ul',
    submenuClass: 'rd-mobilemenu_submenu',
    panelClass: 'rd-mobilepanel',
    toggleClass: 'rd-mobilepanel_toggle',
    titleClass: 'rd-mobilepanel_title'
  },
  lastY, dir;


  var RDMobileMenu = function (element, options) {
    this.options = options;

    this.$source = $(element);
  };

  RDMobileMenu.prototype = {
    init: function () {
      var nav = this;
      nav.createDOM();
      nav.createListeners();
    },

    createDOM: function () {
      var nav = this;

      $('body')
      .append($('<div/>', {
        'class': settings.cntClass
      }).append(nav.createNavDOM()))
      .append($('<div/>', {
        'class': settings.panelClass
      })
      .append($('<button/>', {
        'class': settings.toggleClass
      }).append($('<span/>')))
      .append($('<h2/>', {
        'class': settings.titleClass                        
      }).append($('[data-type="rd-navbar-brand"]').length? $('[data-type="rd-navbar-brand"]').html() : document.title))
      );
    },

    createNavDOM: function () {
      var nav = this;

      var menu = $('<ul>', {'class': settings.menuClass});

      var li = nav.$source.children();
      for (var i = 0; i < li.length; i++) {
        var o = li[i].children,
        item = null;
        for (var j = 0; j < o.length; j++) {
          if (o[j].tagName) {
            if (!item) {
              item = document.createElement('li');
              if (li[i].className.indexOf('active') > -1) {
                item.className = 'active';
              }
            }

            switch (o[j].tagName.toLowerCase()) {
              case 'a':
              var link = o[j].cloneNode(true);
              item.appendChild(link);
              break;
              case 'ul':

              var submenu = o[j].cloneNode(true);
              submenu.className = settings.submenuClass;
              $(submenu).css({"display": "none"});
              item.appendChild(submenu);
              $(item).find('> a')
              .each(function () {
                $this = $(this);
                $this.addClass('rd-with-ul')
                .append($('<span/>', {class: 'rd-submenu-toggle'}))
                .find('.rd-submenu-toggle')
                .on('click', function (e) {
                  e.preventDefault();
                  $this = $(this).parent();

                  if ($this.hasClass('rd-with-ul') && !$this.hasClass('active')) {
                    $('.rd-with-ul').removeClass('active');
                    var submenu = $this.addClass('active').parent().find('.' + settings.submenuClass);
                    submenu.stop().slideDown();
                    $('.' + settings.submenuClass).not(submenu).stop().slideUp();
                  } else {
                    var submenu = $this.removeClass('active').parent().find('.' + settings.submenuClass);
                    submenu.stop().slideUp();
                  }
                });
              });

              break;
              default:
              break;
            }
          }
        }

        if (item) {
          menu.append(item);
        }
      }

      return menu;
    },

    createListeners: function () {
      var nav = this;

      nav.createToggleListener();
      nav.createResizeListener();
    },

    createToggleListener: function () {
      var nav = this,
      type;

      if (nav.isMobile()){
        type = 'touchstart';
      }else{
        type = 'click';
      }

      $('body').delegate('.' + settings.toggleClass, type, function () {
        var o = $('.' + settings.cntClass);
        $(this).toggleClass('active');

        if (o.hasClass('active')) {
          $(this).removeClass('active');
          o.removeClass('active');
          $('body').undelegate('*', 'mousewheel', nav.scroll);
          $('body').undelegate('*', 'touchmove', nav.scroll);
          $('body').undelegate('*', 'touchend', nav.touchend);
          $('body').undelegate('*', 'touchstart', nav.close);
          $('body').undelegate('*:not(.' + settings.toggleClass + ' span)', 'click', nav.close);
        } else {
          $(this).addClass('active');
          o.addClass('active');
          $('body').delegate('*', 'mousewheel', nav.scroll);
          $('body').delegate('*', 'touchmove', nav.scroll);
          $('body').delegate('*', 'touchend', nav.touchend);
          $('body').delegate('*', 'touchstart', {type: type}, nav.close);
          $('body').delegate('*:not(.' + settings.toggleClass + ' span)', 'click', {type: type}, nav.close);
        }
      });
    },

    createResizeListener: function () {
      var nav = this;

      $(window).on('resize', function () {
        var o = $('.' + settings.cntClass);

        if (o.css('display') == 'none') {
          o.removeClass('active');
          $('.' + settings.toggleClass).removeClass('active');
          $('body').undelegate('*', 'mousewheel', nav.scroll);
          $('body').undelegate('*', 'touchmove', nav.scroll);
          $('body').undelegate('*', 'touchend', nav.touchend);
          $('body').undelegate('*', 'touchstart', nav.close);
          $('body').undelegate('*:not(.' + settings.toggleClass + ' span)', 'click', nav.close);
        }
      });
    },

    scroll: function (e) {
      e.preventDefault();
      var menu = $('.' + settings.menuClass);

      var x = e.originalEvent.targetTouches ? e.originalEvent.targetTouches[0].pageX : e.pageX,
      y = e.originalEvent.targetTouches ? e.originalEvent.targetTouches[0].pageY : e.pageY;

      if (
        y > menu.offset().top &&
        y < (menu.offset().top + menu.outerHeight()) &&
        x > menu.offset().left &&
        x < (menu.offset().left + menu.outerWidth())
        ) {
        var delta = 0;
      if (e.originalEvent.targetTouches) {
        if (!lastY) lastY = y;
        delta = (lastY - y);

        lastY = y;
        dir = delta > 0;

      } else {
        delta = (e.originalEvent.wheelDelta || -e.originalEvent.detail) * (-50)
      }

      menu.stop().scrollTop(menu.scrollTop() + delta);
    }
    return false;
  },

  touchend: function (e) {
    var menu = $('.' + settings.menuClass);

    menu.stop().animate({
      scrollTop: menu.scrollTop() + (dir ? 100 : -100)
    }, 3000, 'easeOutQuint');
    lastY = undefined;
  },

  close: function (e) {
    if (!e.originalEvent) {
      return;
    }

    var menu = $('.' + settings.menuClass);
    var x = e.originalEvent.targetTouches ? e.originalEvent.targetTouches[0].pageX : e.pageX,
    y = e.originalEvent.targetTouches ? e.originalEvent.targetTouches[0].pageY : e.pageY;

    if (!(
      y > menu.offset().top &&
      y < (menu.offset().top + menu.outerHeight()) &&
      x > menu.offset().left &&
      x < (menu.offset().left + menu.outerWidth())
      )
      ) {
      $('.' + settings.toggleClass).trigger(e.data.type);
  }
},

isMobile: function () {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
};

$.fn.rdparallax = function (option) {
  var o = this;

  if (o.length) {
    new RDMobileMenu(o[0]).init();
  }
  return o;
};

window.RDMobilemenu_autoinit = function (selector) {
  var o = $(selector);
  if (o.length) {
    new RDMobileMenu(o[0]).init();
  }
};
})(jQuery);

$(document).ready(function () {
  RDMobilemenu_autoinit('[data-type="navbar"]');
});

HTML：

          <li class="dropdown ">
            <a href="AboutUs.html">About Us</a>
            <ul class="dropdown-menu">
              <li>
                <a href="AboutUs.html">Company Overview</a>
              </li>
              <li>
                <a href="#">Company Profile</a>
              </li>
              <li>
                <a href="ourCustomers.html">Customers</a>
              </li>
              <li>
                <a href="contactUs.html">Contact Us</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#">Services</a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">Service 1</a>
              </li>
              <li>
                <a href="#">Service 2</a>
              </li>
              <li class="dropdown">
                <a href="#">Service 3 w/dropdown &nbsp;<b class="caret-right"></b></a>
                <ul class="dropdown-menu">
                  <li>
                    <a href="approach.html">abc Approach</a>
                  </li>
                  <li>
                    <a href="#">Performance Services</a>
                  </li>
                  <li>
                    <a href="#">Continuous Improvement</a>
                  </li>
                </ul>

多级导航生成器，javascript

0 个答案: