个人中心
gpt4 book ai didi

jquery - 使用 jQuery 隐藏菜单，然后使用 CSS3 媒体查询重新出现

转载 作者：行者123 更新时间：2023-11-28 10:25:32 28 4
gpt4 key购买 nike

希望这应该是一个简单的，但就是不太明白。我正在制作一个小的响应式菜单，当窗口大于 800 像素宽时，它会在页面顶部显示为内联 block 。当低于此值时，导航消失并被一个切换按钮取代，单击该按钮会弹出下方和左侧的导航。

一切正常，但是代码中的一个小错误是，如果您将窗口大小调整到 800 像素以下，打开菜单然后再次关闭，然后将窗口大小调整回 800 像素以上，菜单将不再显示顶部，因为 jQuery 已将其隐藏。

是否可以更有效地重写我的媒体查询，以便任何时候将窗口大小调整到 800 像素以上时，它都能正常显示菜单？我最初写了一个小 jQuery，它不断检查 $(window).width() 是否高于 800，但这似乎是一个非常笨拙的解决方案。

谢谢!弗雷泽

<!DOCTYPE html>
<html>
    <head>

        <title>Refined Responsive Menu</title>

        <style>

            /* General Styles */

            body{
                font-family: Helvetica, Sans;
                font-size: 14px;
                padding: 0;
                margin: 0;
            }

            .container{
                max-width: 1000px;
                margin: 0 auto;
            }

            .content{
                min-height: 2000px;
                padding-top: 80px;
            }

            .content p{
                padding-left: 30px;
                padding-right: 30px;
            }


            /* Navigation Bar */

            nav{
                background: #222;
                border-bottom: 1px solid #000;
                margin: 0;
                padding: 0;

                position: fixed;
                width: 100%;
            }

            nav ul{
                padding: 0;
                margin: 0;
                max-width: 1000px;
            }

            nav ul li{
                display: inline-block;
            }

            nav ul li a{
                color: #FFF;
                text-decoration: none;
                padding: 20px 30px;
                display: inline-block;
            }

            nav ul li a:hover{
                background: #444;
            }

            div.toggle-menu-btn{
                display: none;

                background: #222;
                color: #FFF;
                padding: 20px 30px;

                position: fixed;
                width: 100%;
            }

            div.toggle-menu-btn:hover{
                background: #444;
                cursor:pointer;
            }


            /* Media Queries */

            @media screen and (max-width: 800px) {

                div.toggle-menu-btn{
                    display: inline-block;
                }

                nav{
                    display: none;

                    margin-top: 60px;
                    width: 50%;
                    min-width: 200px;
                }

                nav ul li{
                    display: block;
                }

                nav ul li a{
                    display: block;
                }



            }

        </style>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){

                $('.toggle-menu-btn').click(function(){
                    $('nav').toggle();
                });

            });
        </script>

    </head>
    <body>

        <div class="toggle-menu-btn">Toggle</div>

        <nav>

            <div class="container">

                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Information</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>

            </div>

        </nav>

        <div class="container content">

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce purus quam, scelerisque id felis eget, sollicitudin vulputate est. Suspendisse ultrices tortor non feugiat rutrum. Vestibulum et quam nec est sollicitudin luctus. Nam dapibus est orci, et ultrices dolor dapibus suscipit. Nullam at ligula justo. Donec justo ligula, aliquet nec sapien nec, venenatis porttitor nibh. Proin a neque in metus accumsan auctor. Cras imperdiet risus ut mauris gravida, id ultrices velit condimentum. Proin non justo at lectus volutpat imperdiet.</p>

        <p>Sed tempus sodales luctus. Suspendisse ullamcorper feugiat urna, eu convallis lacus rutrum eget. Aenean vitae facilisis elit, nec sagittis lectus. Aliquam erat volutpat. Mauris et molestie eros. Donec eget imperdiet nisi. Donec pretium justo in sollicitudin hendrerit. Duis ac turpis libero. Sed justo augue, sodales porttitor diam id, pretium venenatis lectus. Donec a sem ut libero ornare tincidunt ut vitae felis.</p>

        <p>In ultrices sodales mattis. Morbi porta sapien tellus, tempor aliquet risus egestas adipiscing. Integer accumsan lobortis consectetur. Quisque hendrerit elit tortor, id cursus arcu interdum in. Cras consequat, odio eget suscipit auctor, tortor odio tristique velit, sed cursus erat mi vitae mi. Maecenas hendrerit ante ut elit elementum bibendum. Fusce cursus, mi sit amet semper hendrerit, justo nunc pharetra turpis, sed condimentum orci elit sed arcu. Maecenas eu tempor turpis. Aenean luctus eu enim in dictum. Duis adipiscing in tortor sed fermentum. Ut cursus sed erat eu elementum. Nulla eget nibh a sem tempus dictum. Sed tempus orci ac accumsan euismod. Sed consequat nibh quis ipsum dictum adipiscing. Integer non risus tortor. Donec molestie tincidunt justo sed rhoncus.</p>

        <p>In elementum eget orci nec luctus. Duis id tellus tellus. Mauris sodales elit et mi cursus feugiat sit amet vitae felis. Sed et sem vitae turpis auctor vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus a sagittis metus. Pellentesque blandit libero tincidunt, fringilla felis non, porta dolor. Mauris dictum enim at laoreet eleifend. Vivamus dictum eleifend volutpat. Etiam ultricies ultricies elit ac pellentesque. Suspendisse mollis lorem viverra varius volutpat. Mauris pretium lacus quis facilisis dictum. Praesent vel nisl quis enim auctor dignissim.</p>

        <p>Maecenas et mi nec magna mollis pretium. Fusce commodo elit odio, sit amet tincidunt dolor feugiat sed. Praesent risus nibh, sollicitudin vitae dictum mattis, varius ut tortor. Pellentesque dapibus metus nec nisi sollicitudin, eget dignissim massa elementum. Nulla consectetur, enim ut dapibus convallis, nisl lectus pulvinar nulla, eget dictum eros ligula sed libero. Proin ultrices rutrum est, dapibus iaculis ligula tempor non. Mauris vestibulum dolor elit, in egestas mi tempus ac. Curabitur sollicitudin turpis ut sapien dignissim vestibulum. Pellentesque vel dui eget purus elementum aliquet vitae non erat.</p>

        </div>

    </body>
</html>

最佳答案

我会说，试试:

@media screen and (min-width: 800px) {
    nav{
         display: block !important;
    }
}

关于jquery - 使用 jQuery 隐藏菜单，然后使用 CSS3 媒体查询重新出现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23736396/

28 4 0
文章推荐： javascript - 旋转木马的交叉淡入淡出效果无法正常工作
文章推荐： javascript - MVC 和 javascript 新方法；问 : May I have problems in future with this approach?
文章推荐： javascript - json_parse 函数在 IE7 中运行速度非常慢
文章推荐： javascript - Ruby on Rails - 存储和访问大型数据集
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com