根据视图更改菜单

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&nbsp;#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 heightdocument.getElementById('button').setAttribute('data-target', '#desktopMenu'); // or however you want to add/change attributes}希望有帮助