jquery - 小屏幕上不显示下拉菜单

Question

我正在基于来自 codyhouse 的这个创建一个 megamenu http://codyhouse.co/gem/css-mega-site-navigation

我现在面临的问题是只有 dropdown 2。它在大屏幕上运行良好，但在小屏幕上不显示下拉菜单。我认为它一定与 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');
});

我还将 子菜单 功能更改为这些:(由于 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