0

ブートストラップ アプリで次のメディア クエリを使用しています。

  @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にブートストラップボタンを表示させ、ボタンが押されるまでドロップダウンメニューを非表示にするためにターゲットにする必要があるセレクターを誰でもアドバイスできますか。

どんな助けでも大歓迎

4

1 に答える 1

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;
      }
    });
  }
});

これを試して、正しい方向に開始できるかどうかを確認してください (しゃれが意図されています)。

于 2012-07-19T20:01:54.343 に答える