平板电脑的引导导航下拉链接解决方案？

Question

我有一个导航栏，当您将鼠标悬停在桌面上时会显示下拉菜单，而在移动设备和平板电脑上则显示下拉菜单，但仅限纵向。但是，对于平板电脑景观，菜单的功能就像在桌面上一样，这使得下拉链接无法访问，因为当您点击链接时它只是链接到父链接。我怎样才能使平板电脑版本的功能像手机但看起来像桌面版本？还是让所有设备的点击都显示下拉链接会更好？

<header id="masthead" class="site-header" role="banner">
        <div class="container-fluid">
            <div id="main-nav" class="row">
                <div class="header-wrap">
              <div class="site-branding">
                            <p class="site-title"><a href="#" rel="home">SITE NAME</a></p>
                    </div>
        <nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </button>
            <ul id="primary-menu" class="menu">
      <li class="menu-item menu-item-has-children dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="#">Parent Link<b class="caret"></b></a>
      <ul class="dropdown-menu">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
      </li>
      </ul>
      </nav>
      </div>
    </div>
  </div>
</header>


.nav-menu {
  display: none;
  position: relative;
  top: 70px;
  @media (min-width: 768px) and (max-width: 992px) {
    top: 0;
  }
}
.dropdown-menu {
  display: none;
  position: static;
  width: 100%;
  li {
    width: 100%;
  }
  min-width: 180px;
}
.dropdown-menu > .active a {
  background-color: #fff;
  color: #000 !important;
}

.main-navigation.toggled {
  .nav-menu {
    width: 100%;
    display: block;
    background-color: #363636;
    li {width: 100%; display: block;background-color: #363636; text-transform: uppercase; border-top: .5px solid #434343;}
    li > a {
      padding: 8px;
      pointer-events: none; // prevent it's immediate A child to follow HREF
      cursor: default;
    }
    a {color: #fff;}
    .dropdown-menu {
      position:static;
      top: 80px;
      display: none;
      background: none;
      box-shadow: none;
      padding: 0;
      a {
        color: #fff;
        pointer-events: auto;
        cursor: pointer;
      }
      li {
        background-color: #000;
        a {
          width: 100%;
          &:hover {
            color: #000;
          }
        }
      }
    }
  }
}


@media (min-width: 992px) {
  .main-navigation {
      .nav-menu {
        top: 0;
      }
        .dropdown-menu {
            visibility: hidden;
            display: block;
            opacity: 0;
            border-radius: 0;
            top: 3.15em;
            background-color: $site-dark-gray;
            // transform: translateY(-20px);
            transform: translateY(20px);
            transition: all .3s ease;
            left: -1.5em !important;
            overflow: hidden;
            padding: 0;
            border: 0;
        li:first-child {display: none !important;}
            li {
                margin: 0 !important;
                transition: all .3s ease;
                a {
                    padding-top: 8px;
                padding-bottom: 8px;
                }
                &:hover a {
                    color: #000 !important;
                    background-color: #fff;
                }
            }
            .active > a {
                    background-color: #fff;
                    color: #000 !important;
            }
        }

        .dropdown:hover .dropdown-menu {
                display: block;
                opacity: 1;
                visibility: visible;
                transform: translateY(0px);
        }
        .dropdown:after {
            content: "";
            display: block;
            height: 2em;
        position: absolute;
        top: 1em;
        width: 100%;
    }
  }
}

Answer 1

如here 所述，您必须实现一个新的媒体查询，该查询限制在 768 和 xy 像素之间 - xy 将是您的新断点，如平板电脑的宽度（1024？） .请参考投票答案的 cmets，因为答案本身提供的解决方案不起作用 - 相反，如果您相应地调整值，ZimSystem 提供的this link 会提供满足您需求的解决方案！

但是，这样做不会将此查询限制在移动设备上，因此在桌面设备上将浏览器窗口的大小调整到 1024 像素以下也会折叠导航栏。我还没有听说将媒体查询限制在移动设备上的任何可能性，因此虽然这可能不是您的最佳解决方案，但它应该是一种临时的解决方案。