下拉列表未在小屏幕上显示

Question

我根据codyhouse http://codyhouse.co/gem/css-mega-site-navigation

创建了一个megamenu

我现在面临的问题仅在于下拉列表。它在大屏幕上工作正常，但在较小的屏幕上，下拉列表没有显示。我认为它必须与CSS有关，但不太确定究竟是什么。 所有其他下拉菜单都工作得很好，除了那个较小的屏幕。有想法该怎么解决这个吗？

这是演示http://codepen.io/anon/pen/jPaKoG

HTML

<!-- NAVIGATION -->
  <nav class="cd-nav">
    <ul id="cd-primary-nav" class="cd-primary-nav is-fixed">
      <li class="has-children"> <a href="#">Dropdown 1</a>
        <ul class="cd-secondary-nav is-hidden">
          <li class="go-back"><a href="#">Menu</a></li>
          <li class="see-all"></li>
          <li class="has-children"> <a href="#">Accessories</a>
            <ul class="is-hidden">
              <li class="go-back"><a href="#">Clothing</a></li>
              <li class="see-all"><a href="#">All Accessories</a></li>
              <li class="has-children"> <a href="#">Beanies</a>
                <ul class="is-hidden">
                  <li class="go-back"><a href="#">Accessories</a></li>
                  <li class="see-all"><a href="#">All Benies</a></li>
                  <li><a href="#">Caps &amp; Hats</a></li>
                  <li><a href="#">Gifts</a></li>
                  <li><a href="#">Scarves &amp; Snoods</a></li>
                </ul>
              </li>
              <li class="has-children"> <a href="#">Caps &amp; Hats</a>
                <ul class="is-hidden">
                  <li class="go-back"><a href="#">Accessories</a></li>
                  <li class="see-all"><a href="#">All Caps &amp; Hats</a></li>
                  <li><a href="#">Beanies</a></li>
                  <li><a href="#">Caps</a></li>
                  <li><a href="#">Hats</a></li>
                </ul>
              </li>
              <li><a href="#">Glasses</a></li>
              <li><a href="#">Gloves</a></li>
              <li><a href="#">Jewellery</a></li>
              <li><a href="#">Scarves</a></li>
              <li><a href="#">Wallets</a></li>
              <li><a href="#">Watches</a></li>
            </ul>
          </li>
          <li class="has-children"> <a href="#">Bottoms</a>
            <ul class="is-hidden">
              <li class="go-back"><a href="#">Clothing</a></li>
              <li class="see-all"><a href="#">All Bottoms</a></li>
              <li><a href="#">Casual Trousers</a></li>
              <li class="has-children"> <a href="#">Jeans</a>
                <ul class="is-hidden">
                  <li class="go-back"><a href="#">Bottoms</a></li>
                  <li class="see-all"><a href="#">All Jeans</a></li>
                  <li><a href="#">Ripped</a></li>
                  <li><a href="#">Skinny</a></li>
                  <li><a href="#">Slim</a></li>
                  <li><a href="#">Straight</a></li>
                </ul>
              </li>
              <li><a href="#">Leggings</a></li>
              <li><a href="#">Shorts</a></li>
            </ul>
          </li>
          <li class="has-children"> <a href="#">Jackets</a>
            <ul class="is-hidden">
              <li class="go-back"><a href="#">Clothing</a></li>
              <li class="see-all"><a href="#">All Jackets</a></li>
              <li><a href="#">Blazers</a></li>
              <li><a href="#">Bomber jackets</a></li>
              <li><a href="#">Denim Jackets</a></li>
              <li><a href="#">Duffle Coats</a></li>
              <li><a href="#">Leather Jackets</a></li>
              <li><a href="#">Parkas</a></li>
            </ul>
          </li>
          <li class="has-children"> <a href="#">Tops</a>
            <ul class="is-hidden">
              <li class="go-back"><a href="#">Clothing</a></li>
              <li class="see-all"><a href="#">All Tops</a></li>
              <li><a href="#">Cardigans</a></li>
              <li><a href="#">Coats</a></li>
              <li><a href="#">Hoodies &amp; Sweatshirts</a></li>
              <li><a href="#">Jumpers</a></li>
              <li><a href="#">Polo Shirts</a></li>
              <li><a href="#">Shirts</a></li>
              <li class="has-children"> <a href="#">T-Shirts</a>
                <ul class="is-hidden">
                  <li class="go-back"><a href="#">Tops</a></li>
                  <li class="see-all"><a href="#">All T-shirts</a></li>
                  <li><a href="#">Plain</a></li>
                  <li><a href="#">Print</a></li>
                  <li><a href="#">Striped</a></li>
                  <li><a href="#">Long sleeved</a></li>
                </ul>
              </li>
              <li><a href="#">Vests</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="has-children one-col"> <a href="#">Dropdown 2</a>
        <ul class="cd-secondary-nav is-hidden">
          <li class="go-back"><a href="#">Menu</a></li>
          <li class="has-children"> 
            <ul class="is-hidden">
              <li class="go-back"><a href="#">Go back</a></li>
              <li class="has-children"> <a href="#">Beanies</a>
                <ul class="is-hidden">
                  <li class="go-back"><a href="#">Go back</a></li>
                  <li class="see-all"><a href="#">All Benies</a></li>
                  <li><a href="#">Caps &amp; Hats</a></li>
                  <li><a href="#">Gifts</a></li>
                  <li><a href="#">Scarves &amp; Snoods</a></li>
                </ul>
              </li>
              <li><a href="#">Glasses</a></li>
              <li><a href="#">Gloves</a></li>
              <li><a href="#">Jewellery</a></li>
              <li><a href="#">Scarves</a></li>
              <li><a href="#">Wallets</a></li>
              <li><a href="#">Watches</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </nav>
  <!-- END NAVIGATION --> 
  <!-- MAIN CONTENT -->
  <div class="cd-main-content">
    <div class="cd-overlay"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus magna vel elementum laoreet. Aliquam erat volutpat. Ut eu mi venenatis, egestas leo vitae, gravida magna. Nullam nibh risus, tincidunt non eros eu, efficitur lobortis lectus. Sed vel neque pretium, porta ligula ac, congue tellus. Aliquam viverra neque turpis, eu porttitor velit molestie et. Phasellus vitae lorem nisi. Curabitur vel fringilla massa. Ut in suscipit magna. Nam vulputate lacinia congue. Mauris vitae sapien sem. Vivamus lobortis justo arcu, id porttitor metus semper in. Praesent turpis lorem, finibus et dolor quis, congue aliquet quam. Curabitur ac pellentesque orci, non ornare nulla.

Vestibulum quis ullamcorper sapien, non tempus metus. Proin nisi est, feugiat vulputate posuere nec, cursus eu lacus. Ut pellentesque tortor pellentesque ligula scelerisque, nec tristique lacus pellentesque. Vestibulum sollicitudin augue feugiat leo euismod, id cursus libero dapibus. Nulla vitae luctus nisi, tincidunt dictum tellus. Vestibulum porttitor porta est aliquam placerat. Aliquam pharetra luctus libero sit amet luctus. Morbi dignissim semper nibh sed euismod.</p>
  </div>
  <!-- END MAIN CONTENT -->

Answer 1

go-back按钮导致了冲突。为了解决冲突：

//submenu items - go back link
$('.go-back').on('click', function(){
    $(this).parent('ul').addClass('is-hidden').parent('.has-children').parent('ul').addClass('is-hidden').parent('li').parent('ul').removeClass('moves-out');
});

$('#back1').on('click', function(){
    $(this).parent('ul').addClass('is-hidden').parent('.has-children').parent('ul').addClass('is-hidden').parent('li').parent('ul').removeClass('moves-out');
});

我还将sub-menu功能更改为:(由于is-hidden类需要再删除一行）

//open submenu
    $('.has-children').children('a').on('click', function(event){
        if( !checkWindowWidth() ) event.preventDefault();
        var selected = $(this);
        if( selected.next('ul').hasClass('is-hidden') ) {
            //desktop version only
            selected.addClass('selected').next('ul').removeClass('is-hidden').end().parent('.has-children').parent('ul').addClass('moves-out');
      $('ul.cd-secondary-nav > li.has-children > ul.is-hidden').removeClass('is-hidden');
            selected.parent('.has-children').siblings('.has-children').children('ul').addClass('is-hidden').end().children('a').removeClass('selected');
            $('.cd-overlay').addClass('is-visible');
        } else {
            selected.removeClass('selected').next('ul').addClass('is-hidden').end().parent('.has-children').parent('ul').removeClass('moves-out');
            $('.cd-overlay').removeClass('is-visible');
        }
        toggleSearch('close');
    });

Working demo