Вертикальное JavaScript Меню - Отображение не всех подразделов

Question

В настоящее время я помогаю создать сайт для члена семьи в рамках модельного клуба, который у них есть. Веб-сайт на http://testindyamps.weebly.com/.

Это веб-сайт на хосте, который использует различные шаблоны для тем (мне не очень помогали люди на этом сайте).

Я не на 100% уверен, что это лучшее место для размещения вопроса, но я подумал, что мне стоит попробовать.

Основная проблема заключается в том, что он использует боковую панель навигации. где, когда вы нажимаете на меню, оно расширяется вниз, чтобы показать подстраницы. В этом случае не все подстраницы отображаются. (Например, при нажатии «Статьи», а затем «Книги» отображаются только первые несколько из дюжины или около того страниц.

Я попытался отредактировать сам код JS, которого до сих пор не было аффект. Я попытался отредактировать некоторые из CSS, но, похоже, они тоже не влияют.

Если это поможет, я могу поделиться osme кода CSS или * 1029. * код для самого сайта. Любая помощь будет признательна.

Спасибо.

ОБНОВЛЕНИЕ: Добавлен код в соответствии с запросом. Обновление 2: Добавлено HTML: исправлено правильное URL (с использованием тестовый сайт вместо "фактического" сайта для навигации).

jQuery(function($) {

  // Mobile sidebars
  $.fn.expandableSidebar = function(expandedClass) {
    var $me = this;

    $me.on('click', function() {
      if(!$me.hasClass(expandedClass)) {
        $me.addClass(expandedClass);
      } else {
        $me.removeClass(expandedClass);
      }
    });
  }

  // Interval loop
  $.fn.intervalLoop = function(condition, action, duration, limit) {
    var counter = 0;
    var looper = setInterval(function(){
      if (counter >= limit || $.fn.checkIfElementExists(condition)) {
        clearInterval(looper);
      } else {
        action();
        counter++;
      }
    }, duration);
  }

  // Check if element exists
  $.fn.checkIfElementExists = function(selector) {
    return $(selector).length;
  }

  // Check if desktop display

  $.fn.isDesktop = function() {
    return $(window).width() > 1024;
  }

  var briskController = {
    init: function(opts) {
      var base = this;

      base._addClasses();

      setTimeout(function(){
        base._attachEvents();
      }, 1000);
    },

    _addClasses: function() {
      var base = this;

      // Add fade in class to nav + logo + banner
      $('body').addClass('fade-in');

      // Keep subnav open if submenu item is active
      $('.sidebar-nav .active').parents('.has-submenu').children('.dropdown').addClass('open');

      // Add placeholder text to inputs
      $('.wsite-form-sublabel').each(function(){
        var sublabel = $(this).text();
        $(this).prev('.wsite-form-input').attr('placeholder', sublabel);
      });
    },

    _cloneLogin: function() {
      var loginDetach = $('#member-login').clone(true);
      $('.mobile-nav .wsite-menu-default > li:last-child').after(loginDetach);
    },

    _stickyNav: function() {
      var sticky,
          collapse,
          uncollapse,
          desktopsticky = $('body.nav-position-top.sticky-nav-on:not(.wsite-checkout-page):not(.wsite-native-mobile-editor), body.nav-position-top-right.sticky-nav-on:not(.wsite-checkout-page):not(.wsite-native-mobile-editor)').length,
          mobilesticky = $('body.sticky-nav-on:not(.wsite-checkout-page):not(.wsite-native-mobile-editor)').length;

      var stickyInit = function() {
        if (!$.fn.isDesktop() || desktopsticky) {
          // Add sticky desktop nav
          sticky = new Waypoint.Sticky({
            element: $('.header')[0]
          });
        }
        if ($.fn.isDesktop() && desktopsticky) {
          // Collapse header on scroll
          collapse = new Waypoint({
            element: $('body.nav-position-top.sticky-nav-on:not(.wsite-checkout-page):not(.wsite-native-mobile-editor)')[0],
            handler: function(direction) {
              $('body').addClass('collapse');
            },
            offset: -10
          });
          uncollapse = new Waypoint({
            element: $('body.nav-position-top'),
            handler: function(direction) {
              $('body').removeClass('collapse');
            },
            offset: -5
          });
        }
      }

      stickyInit();

      $(window).resize(function() {
        if (sticky) { sticky.destroy() }
        if (collapse) { collapse.destroy() }
        if (uncollapse) { uncollapse.destroy() }
        stickyInit();
      });
    },

    _sidebarNav: function() {

      // Fixed sidebar nav unless menu height exceeds viewport height
      var sidebarCheck = function() {
        if ($.fn.isDesktop() && $('body').hasClass('sticky-nav-on') && $('.header .container').height() + $('.header .contact').height() <= $(window).height() - 45) {
          $('body.nav-position-sidebar .header').addClass('stuck');
        }
        else {
          $('body.nav-position-sidebar .header').removeClass('stuck');
        }
      }

      sidebarCheck();

      $(window).resize(function() {
        sidebarCheck();
      });
    },

    _sidebarCart: function(){
      $('#wsite-mini-cart').addClass('cart-init');

      $('.wsite-nav-cart a').click(function() {
        $('.cart-init').toggleClass('cart-visible');
      });

      $('.wrapper, .header').click(function() {
        $('.cart-init').removeClass('cart-visible');
      });
    },

    _attachEvents: function() {
    	var base = this;
        // Hamburger nav toggle
        $('.hamburger').on('click', function(e) {
          e.preventDefault();
          $('body').toggleClass('nav-open');
        });

        // Initialize sticky nav
        base._stickyNav();

        // Initialize sidebar nav
        base._sidebarNav();

      	// Copy login
        $.fn.intervalLoop('.mobile-nav #member-login', base._cloneLogin, 800, 5);

        // Subnav toggle
        $('li.has-submenu span.icon-caret, .dropdown-link').on('click', function() {
            var $me = $(this);
            if ($me.parent().hasClass('open')) {
              $me.parent().removeClass('open');
              $me.find('.open').removeClass('open');
            }
            else {
              $('.open').removeClass('open');
              $me.parents('.has-submenu').children('.dropdown').addClass('open');
            }
            setTimeout(function(){
              base._sidebarNav();
            }, 800);
        });

      // Sidebar Cart Link
      $.fn.intervalLoop('.cart-init', base._sidebarCart, 1000, 5);

      // Store category dropdown
      $('.wsite-com-sidebar').expandableSidebar('sidebar-expanded');

      // Search filters dropdown
      $('#wsite-search-sidebar').expandableSidebar('sidebar-expanded');

    	// Init fancybox swipe on mobile
      if ('ontouchstart' in window) {
        $('body').on('click', 'a.w-fancybox', function() {
          base._initSwipeGallery();
        });
      }
    },

    _initSwipeGallery: function() {
      var base = this;

      setTimeout(function(){
        var touchGallery = document.getElementsByClassName('fancybox-wrap')[0];
        var mc = new Hammer(touchGallery);
        mc.on("panleft panright", function(ev) {
          if (ev.type == "panleft") {
            $("a.fancybox-next").trigger("click");
          } else if (ev.type == "panright") {
            $("a.fancybox-prev").trigger("click");
          }
          base._initSwipeGallery();
        });
      }, 500);
    }
  }

  $(document).ready(function(){
  	briskController.init();
  });
});

/* Header */

.header {
  position: relative;
  width: 100%;
  color: @fill;
  background: @bg;
  border-bottom: 1px solid fade(@fill, 5);
  box-sizing: border-box;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  z-index: 12;

  .hamburger,
  .contact,
  .desktop-nav,
  .sidebar-nav {
    display: none;
  }
}

body.nav-open {
  overflow: hidden;
  @media @tablet-up {
    overflow: auto;
  }
}

body:not(.nav-position-sidebar),
body.nav-position-top,
body.nav-position-top-right {
  @media @tablet-up {
    .header {
      position: relative;
      padding: 10px 40px;
      border-bottom: none;
      .transition(~'padding 280ms ease');

      .container {
        display: table;
        overflow-y: hidden;
        width: 100%;
        height: 80px;
        .transition(~'height 280ms ease');
      }

      .logo {
        display: table-cell;
        text-align: left;
        vertical-align: middle;
        max-height: 80px;
        overflow: hidden;

        a {
          padding: 5px 20px 5px 0;
        }
      }

      .desktop-nav {
        display: table-cell;
      }

      .nav {
        li {
          display: inline-block;
        }

        a {
          padding: 10px 20px;
        }
      }

      .membership-cart {
        display: table-cell;
        width: 5%;
        text-align: right;
        white-space: nowrap;

        span {
          display: inline-block;
        }
      }
    }

    &.collapse {
      .header {
        padding: 5px 40px;
        border-bottom: 1px solid fade(@fill, 5);

        .container {
          height: 40px;
        }
      }
    }

    &.full-width-nav-off .header .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 40px;
      box-sizing: border-box;
    }
  }
}

body.nav-position-top-right {
  .desktop-nav {
    text-align: right;
  }
}

.stuck {
  position: fixed !important;
  top: 0;
}

body.nav-position-sidebar {

  @media @tablet-up {
    .header {
      position: absolute;
      top: 0;
      left: 0;
      width: 260px;
      min-height: 100vh;
      padding: 40px;
      border-bottom: none;
      display: flex;
      flex-direction: row;

      > .nav-wrap {
        width: 100%;
        min-height: calc(~'100vh - 80px');
        display: flex;
        flex-direction: column;

        > .container {
          flex: 1 0 auto;
        }
      }

      .sidebar-nav {
        display: block;
      }

      .nav {
        li {
          display: block;
        }

        a {
          display: block;
          padding: 10px 0;
        }
      }

      .logo {
        margin: 0 auto 30px;
      }

      .membership-cart > span {
        display: block;
      }
    }

    .contact {
      display: block;
    }

    .wsite-phone {
      display: block;
      font-size: 15px;
      color: fade(@fill, 40);
      padding: 40px 0 0;
      text-align: left;

      &:before {
        content: '';
        display: block;
        width: 60%;
        padding-bottom: 40px;
        border-top: 1px solid fade(@fill, 20);
      }
    }

    .wrapper {
      background: @bg;
      padding-left: 260px;
      box-sizing: border-box;
    }
  }
}

.logo {
  * {
    display: block;
  }

  a {
    color: @primary;
    &:hover {
      opacity: 0.6;
      background: transparent;
      .transition(opacity 200ms ease);
    }
  }

  #wsite-title {
    font-family: @font1;
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  img {
    overflow: hidden;
    max-width: 300px;
    max-height: 70px;
  }

  .wsite-logo {
    overflow: hidden;
    max-width: 100%;
    max-height: 70px;
  }
}

/* Nav */

.nav {
  vertical-align: middle;

  a {
    display: block;
    color: @fill;
    font-family: @font1;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: lowercase;

    &:hover {
      opacity: 0.6;
      background: transparent;
      .transition(opacity 200ms ease);
    }
  }

  .active {
    color: darken(@primary, 10%) !important;
  }

  #wsite-nav-cart-a {
    padding-right: 0;
  }

  #wsite-nav-cart-num {
    position: relative;
    display: inline-block;
    background: mix(@primary, @bg, 60%);
    color: @fill;
    min-width: 25px;
    padding: 7px 2px;
    text-align: center;
    border-radius: 100%;
    z-index: 2;

    @media @tablet-up {
      margin: 0 -6px;
    }
  }
}

.mobile-nav {
  display: none;
}

/* Subnav */

#wsite-menus {
  > .wsite-menu-wrap {
    margin-top: 10px;
  }

  > .wsite-menu-wrap > .wsite-menu .wsite-menu {
    margin: 0 -1px;
  }

  .wsite-menu {
    position: relative;
    background: @bg;
    .box-shadow(inset 0px 0px 0px 1px fade(@fill, 3));

    li a {
      padding: 12px 20px;
      background: transparent;
      color: @fill;
      font-family: @font1;
      font-size: 14px;
      font-weight: normal;
      line-height: normal;
      text-transform: lowercase;
      letter-spacing: 0.05em;
      border: none;

      &:hover {
        opacity: 0.6;
        background: transparent;
        .transition(opacity 200ms ease);
      }
    }
  }

  .wsite-menu-arrow {
    display: none;
  }
}

/* Sidebar and Mobile Subnav */

.sidebar-nav,
.mobile-nav {
  li {
    position: relative;
    border-color: fade(@fill, 80);
  }

  .wsite-menu {
    padding-left: 5px;
    color: fade(@fill, 50);
    border-color: fade(@fill, 50);

    a {
      color: fade(@fill, 50);
    }
  }

  .wsite-menu-wrap {
    display: block !important;
    overflow: hidden;
    max-height: 0;
    .transition(all 600ms ease-in-out);
  }

  .wsite-menu-wrap li.wsite-nav-current > a.wsite-menu-subitem {
    background: rgba(0, 0, 0, 0.95);
    border: none;
  }

  .wsite-menu-wrap .wsite-menu-arrow {
    display: none;
  }

  .dropdown {
    display: table;
    width: 100%;

    &:hover {
      .icon-caret {
        opacity: 0.6;
        background: transparent;
      }
    }

    > .icon-caret,
    > .dropdown-link {
      display: table-cell !important;
      vertical-align: top;

      a {
        display: inline-block !important;
      }
    }

    .icon-caret {
      width: 15px;
      cursor: pointer;
      .transition(all 200ms ease-in-out);

      &:before {
        content: '';
        position: relative;
        display: block;
        width: 5px;
        height: 5px;
        border: solid transparent;
        border-width: 0 1px 1px 0;
        border-color: inherit;
        .transform(~'rotate(45deg)');
      }
    }

    &.open span.icon-caret:before {
      top: 5px;
      .transform(~'rotate(-135deg)');
    }

    &.open + .wsite-menu-wrap {
      width: 100%;
      max-height: 1000px;
    }
  }
}

.sidebar-nav {
  .has-submenu > .dropdown span.icon-caret {
    padding: 12px 0 8px 10px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body class="no-header-page">

  <div class="header">
    <div class="nav-wrap">
      <div class="container">
        <a class="hamburger" aria-label="Menu" href="#"><span></span></a>
        <div class="logo">{logo}</div>
        <div class="nav desktop-nav">{menu}</div>
        <div class="nav sidebar-nav"><div class="nav-wrap">{menu}</div></div>
        <div class="nav membership-cart">{membership}{minicart}</div>
      </div>
      <div class="nav contact">{phone:text}</div>
    </div>
  </div>

  <div class="wrapper">
    <div class="main-wrap">
      {{#sections}}
          <div class="container">{content}</div>
      {{/sections}}
    </div>

    <div class="footer-wrap">
        <div class="footer">{footer}</div>
    </div>
  </div>

  <div class="nav mobile-nav">
    <a class="hamburger" aria-label="Menu" href="#"><span></span></a>
    {menu}
  </div>

  <script type="text/javascript" src="/files/theme/plugins.js"></script>
  <script type="text/javascript" src="/files/theme/custom.js"></script>
</body>

</html>

Answer 1

Причина, по которой не все элементы отображаются, заключается в следующем:

.sidebar-nav .dropdown.open + .wsite-menu-wrap, .mobile-nav .dropdown.open + .wsite-menu-wrap {  
    width: 100%;
    max-height: 1000px;   
}

Элемент расширяется путем изменения max-height с 0px на 1000px. Элементы в вашем меню превышают 1000px, и они обрезаются.

Это на самом деле довольно сложная проблема при использовании переходов CSS для расширения элементов. Переходы CSS работают только на height, если высота установлена ​​на точное значение. Вы можете прочитать больше об этом здесь: https://css-tricks.com/using-css-transitions-auto-dimensions/

Трюк max-height предлагает обходной путь. Но у него есть свой недостаток - если элементы расширяются за пределы значения max-height, оно обрезается.

Самое простое решение - просто увеличить значение max-height, пока не отобразятся все ваши элементы. Это будет работать, но не идеально, если в будущем этот элемент будет расширяться еще больше.

Более сложные (и, возможно, лучшие) решения можно найти на веб-странице css-tricks выше.

Тем не менее, вы уверены, что это хорошая идея - отображать такое огромное количество ссылок в меню аккордеона? Не лучше ли переосмыслить навигацию, возможно, есть отдельная страница со всеми книгами?