Question

让我们从HTML开始吧。可能不需要把它放在这里，但无论如何我都会告诉你们。

        <div class="menu col md12 sm02 mn03">
            <div class="lines"></div>
            <div class="lines"></div>
            <div class="lines"></div>
        </div>
        <div class="nav col mx07 lg08 md12 sm12 mn12">
            <ul>
                <li class="col mx02 md02 sm04 mn06"><a href="#">Company</a></li>
                <li class="col mx02 md02 sm04 mn06"><a href="#">Solutions</a></li>
                <li class="col mx02 md02 sm04 mn06"><a href="#">Services</a></li>
                <li class="col mx02 md02 sm04 mn06"><a href="#">Websites</a></li>
                <li class="col mx02 md02 sm04 mn06"><a href="#">Software</a></li>
                <li class="col mx02 md02 sm04 mn06"><a href="#">Contact</a></li>
            </ul>
        </div>

现在为CSS。我设置好了，所以我的菜单按钮保持隐藏状态。

.menu {display: none;}

然后当屏幕低于701像素时，媒体查询就会启动，其中一部分就是这个。

.menu {display: inherit;}
.nav {display: none;}

然后，点击菜单按钮，我的导航栏就会变好。

$(document).ready(function() {
    $(".menu").click(function() {
        $(".nav").toggle("slow");
    });
});

现在关于这个问题。我转到较小的屏幕尺寸，激活我的菜单按钮并隐藏我的导航栏。单击菜单按钮，导航栏显示。万岁！它再次点击它就消失了。万岁！

除非我回到更大的屏幕尺寸，否则导航栏不会再回来。菜单按钮消失，但导航栏不会显示，除非我回到较小的尺寸，切换它，然后再次返回到更大的尺寸。我知道这里发生了什么，这很容易。 Jquery更改并覆盖CSS并告诉浏览器“好的，只是一直隐藏它。”

所以问题是，我如何做到这一点，一旦我回到更大的屏幕尺寸，我的导航栏会回来，无论切换状态如何？

我没有最后一部分的代码了，但有一次我把它用于Javascript检查屏幕大小的地方，但是JS和CSS屏幕尺寸从来都不一样所以我就放弃了溶液

提前感谢您的回答。

Answer 1

如果你给nav这些类“visible-lg visible-md”，它可能会有效，我假设你使用bootstrap。

Answer 2

找到解决方案，感谢用户改为建议matchMedia（）

//screen size variables
var mqmn = window.matchMedia("screen and (min-width: 150px) and (max-width: 400px)")
var mqsm = window.matchMedia("screen and (min-width: 401px) and (max-width: 550px)")
var mqmd = window.matchMedia("screen and (min-width: 551px) and (max-width: 700px)")
var mqlg = window.matchMedia("screen and (min-width: 701px) and (max-width: 850px)")

//toggle drop-down menu
$(document).ready(function() {
    $(".menu").click(function() {
        $(".nav").toggle("slow");
    });
    $(window).resize(function(){
        if (mqmn.matches){
            //mn size
            $(".menu").show();
            $(".nav").hide();
        } else if (mqsm.matches) {
            //sm size
            $(".menu").show();
            $(".nav").hide();
        } else if (mqmd.matches) {
            //md size
            $(".menu").show();
            $(".nav").hide();
        } else if (mqlg.matches) {
            //lg size
            $(".menu").hide();
            $(".nav").show();
        } else {
            //mx size
            $(".menu").hide();
            $(".nav").show();
        }
    });
});

jQuery下拉菜单和CSS媒体查询冲突

2 个答案: