Question

我为响应式网站创建了一个菜单。

在宽度小于768像素的普通浏览器中查看网站时，导航菜单项将被堆叠并隐藏。用户需要单击切换标签以显示导航项。当浏览器宽度大于992px时，导航菜单项将显示在一行中。

我在iPad上打开网站时发生了问题。如果用户首先以纵向模式（宽度= 768像素）在iPad上打开站点，然后单击切换标签以显示导航菜单，然后再次单击切换标签以隐藏导航菜单。现在，如果用户将其iPad旋转到横向模式（宽度> 768像素），则导航菜单将消失。

但是，如果用户在iPad上以纵向模式打开网站，然后将其旋转到横向模式而无需单击切换标签，则导航菜单在横向模式下可用。

我正在使用基本的jQuery。我认为发生这种情况的原因是，使用“ fadeToggle”时，我不显示任何内容并显示块，并且当我旋转平板电脑时，它无法识别分辨率是否发生了变化。

如何解决此问题？预先感谢。

$(document).ready(function() {
    $(".open-nav").click(function() {
        $(".main-nav").fadeToggle(500);
        $("body").css("overflow-y", "hidden");
        $(".open-nav").css("display", "none");
        $(".close-nav").css("display", "block");
    });
    $(".close-nav").click(function() {
        $(".main-nav").fadeToggle(500);
        $("body").css("overflow-y", "visible");
        $(".close-nav").css("display", "none");
        $(".open-nav").css("display", "block");
    });
  });

header {
        width: 100%;
        height: 90px;
        position: fixed;
        top: 0;
        left: 0;
        background-color: #FFF;
        z-index: 9999;
    }

    header .btn-primary {
        display: none;
    }

    .open-nav {
        background-color: red;
        width: 40px;
        height: 20px;
        display: none;
    }

    .close-nav {
        background-color: green;
        width: 40px;
        height: 20px;
        display: none;
    }

    .logo {
        background-color: blue;
        width: 60px;
        height: 40px;
        float: left;
        margin-top: 20px;
    }

    a.logo {
        display: block;
        float: left;
        margin: 0;
        padding: 0;
        opacity: 1;
    }

    .main-nav {
        float: right;
        height: 50px;
        margin-top: 20px;
    }

    .main-nav ul {
        list-style-type: none;
    }

    .main-nav ul li {
        float: left;
        padding: 0 15px;
    }

    .main-nav ul li a {
        font-family: "Open Sans", Arial, Helvetica, sans-serif;
        display: block;
        margin: 0;
        line-height: 50px;
        font-size: 16px;
        color: #000;
        text-decoration: none;
    }

    .main-nav ul li .btn-primary {
        color: #FFF;
        font-size: 18px;
    }

    .main-nav ul li a.btn-primary:hover {
        border-bottom: none;
    }

    .main-nav ul li a:hover {
        border-bottom: solid #ff0054 2px;
    }
    
    .active {
        border-bottom: solid #ff0054 2px;
}

    
    @media (min-width: 768px) and (max-width: 992px) {
         a.open-nav {
            display: block;
            margin-top: 20px;
        }

        a.close-nav {
            display: none;
            margin-top: 20px;
            z-index: 1;
        }

        .logo {
            z-index: 1;
        }

        .main-nav {
            display: none;
            width: 100vw;
            height: 100vh;
            background-color: #fff;
            float: none;
            z-index: 0;
            position: relative;
            left: 50%;
            right: 50%;
            margin-left: -50vw;
            margin-right: -50vw;
            padding: 0;
        }

        .main-nav ul {
            width: 100%;
            padding: 0;
            padding-top: 25%;
        }

        .main-nav ul li {
            float: none;
            text-align: center;
            padding: 0;
        }

        .main-nav ul li a {
            display: inline-block;
            font-size: 26px;
            margin: 0 30px 60px 30px;
        }

        .main-nav ul li .btn-primary {
            display: none;
        }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
       <div class="container">
          <a class="btn btn-primary col-xs-3 hidden-md" href="#" title="Get a demo">Get a demo</a>
          <div class="logo col-xs-6 col-md-4">
             <a href="#" title="Home">Logo</a>
          </div>
          <a class="open-nav col-xs-3 hidden-md" title="Menu">Open</a>
          <a class="close-nav col-xs-3 hidden-md" title="Menu">Close</a>
          <nav class="main-nav">
             <ul>
                <li><a href="index.html" class="active" title="Home">Home</a></li>
                <li><a href="#" title="Link 1">Link 1</a></li> 
                <li><a href="#" title="Link 2">Link 2</a></li> 
                <li><a class="btn btn-primary" href="#" title="Get a demo">Get a demo</a></li>
             </ul>
          </nav>
        </div>
    </header>

Answer 1

回答我自己的问题。以防万一其他人有同样的问题。

我解决了在CSS代码上添加另一个媒体查询的问题：

/* Large devices and landscape tablets (tablets or desktops, 993px and 1366px)*/
@media screen and (orientation: landscape) and (min-width: 993px) and (max-width: 1366px) {

    .main-nav {
        display: block!important;
    }

}

仍然感谢您的帮助。

当我使用平板电脑访问网站时，导航消失（横向模式）

1 个答案: