根据视图更改菜单

Question

感谢您的光临！

我想求助于你的智慧来解决一个不应该那么难的问题:(

我正在开发一个带有大型折叠菜单（如站点地图）的网站，该菜单非常直观但在移动视图中无用，因此我创建了另一个菜单以在移动和小屏幕设备中显示。

总结代码如下：

<nav class="navbar navbar-light bg-light ">
            <div class="container-fluid ">
                <a class="navbar-brand" href="index.php" id="btnLogo">
                    <img src="../images/logo.png" width="130" height="80" class="d-inline-block align-top" alt="logo">
                </a>
                    <button class="navbar-toggler navbar-toggler-right float-right" 
                        type="button" 
                        data-toggle="collapse" 
                        data-target="#desktopMenu" 
                        aria-controls="desktopMenu"  
                        aria-expanded="false">
                        <span>MENU</span>
                        <span class="navbar-toggler-icon"></span>
                    </button>

            <!-- Menu for Desktops -->
            <div id="desktopMenu" class="collapse navbar-collapse">...</div>

            <!-- Menu for small screens -->
            <div id="mobileMenu" class="collapse navbar-collapse">...</div>

问题是：有什么方法可以根据视口宽度即时更改“data-target”和“aria-controls”以在“desktopMenu”和“mobileMenu”之间进行更改？

我不知道这种方法是否正确/更好。 如果我错了，请不要犹豫，提出另一种方法。

非常感谢！

Answer 1

在您的情况下，有两种方法可以根据视口调整页面。 一种方法是使用@media-queries并显示/隐藏具有display属性的一个或另一个元素。

这将允许您根据屏幕大小调整代码。

@media only screen and (min-width: 1024px) and (max-width: 1024px) {
// in your case: hide an element, show the other 
#desktopMenu { display:none;} // or display block etc
}

您可以根据需要设置width或height 。

这是有关媒体查询的更多信息

您还可以像这样获取当前视口值：

// Size of browser viewport.
var width = window.innerWidth;
var height = window.innerHeight;

然后根据此调整您的代码：

if (height >= yourValue) { // or however you want to check the height
document.getElementById('button').setAttribute('data-target', '#desktopMenu'); // or however you want to add/change attributes
}

希望有帮助