ipad 媒体查询引导下拉菜单

Question

我在我的引导应用程序中使用以下媒体查询。

  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and  (orientation: landscape) {
 .nav li { width: 100%;
         }
 .nav .dropdown ul {display:none; }
 .nav .open ul { display: block; }

 .nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a {
  text-align: center;
   background-color:#211256;
  }

 .nav-collapse .nav > li > a:hover,
 .nav-collapse .dropdown-menu a:hover {
 background-color: #211256;
 color:white;

 }

    .navbar .nav > li  a:hover{
     color:white;
     }

   .navbar .nav .active > a, .navbar .nav .active > a:hover {
    background: #211256;
    color: white;
    text-decoration: none;
   }

   .nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a {
   border-radius: 3px 3px 3px 3px;
   color: white;
   font-weight: bold;
   padding: 6px 15px;
   margin-bottom:2px;

   }

   .navbar .nav li.dropdown .dropdown-toggle .caret, .navbar .nav li.dropdown.open .caret {
  border-bottom-color: white;
  border-top-color: white;
  }


  .navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active >   .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle {
 background-color: transparent;
 color: #211256;
 }
.accordion-inner {
border-top: 1px solid #E5E5E5;
padding: 9px 15px;
}


 }

以横向模式查看页面时

      http://46.32.253.11/

下拉导航栏默认打开，我看不到引导按钮，我对最大宽度 979px 使用完全相同的媒体查询，按钮出现并关闭。

谁能告诉我需要选择什么选择器才能让 ipad 显示引导按钮并隐藏下拉菜单直到按下按钮。

任何帮助表示赞赏

Answer 1

这需要一些 JavaScript，为了简单起见，我将推荐 jQuery。

基本上，您将在 JavaScript 中侦听 orientationchange 事件，然后根据方向调用处理切换的函数。

$(document).ready(function() {
  window.onorientationchange = function() {
    var orientation = window.orientation;
    switch(orientation) {
      case 0: // portrait
        break; 

      case 90: // landscape left
        toggler();
        break;

      case -90: // landscape right
        toggler();
        break;
    }
  }
  function toggler() {
    var toggled = false;
    $('.dropdown-toggle').on('click', function() {
      if (toggled === false) {
        $('.nav .open ul').hide();
        $('.nav .dropdown ul').show();
        toggled = true;
      } else {
        $('.nav .dropdown ul').hide();
        $('.nav .open ul').show();
        toggled = false;
      }
    });
  }
});

试试这个，看看它是否能让你朝着正确的方向开始（双关语）。