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

试试看，看看它是否让你开始在正确的方向（双关意图）。