根据视图更改菜单

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

}

希望有帮助