我想求助于你的智慧來解決一個不應該那么難的問題:(我正在開發一個帶有大折疊菜單（如站點地圖）的網站，該菜單非常直觀，但在移動視圖中毫無用處，因此我創建了另一個菜單以在移動和小屏幕設備中顯示。總結代碼如下：<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”之間進行更改？我不知道這種方法是否正確/更好。如果我錯了，請毫不猶豫地建議另一種方法。
1 回答
德瑪西亞99
TA貢獻1770條經驗 獲得超3個贊
在您的情況下，有兩種方法可以根據視口調整頁面。一種方法是使用@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
}
希望有幫助
- 1 回答
- 0 關注
- 140 瀏覽
添加回答
舉報
0/150
提交
取消