我想求助于你的智慧來(lái)解決一個(gè)不應(yīng)該那么難的問(wèn)題:(我正在開(kāi)發(fā)一個(gè)帶有大折疊菜單（如站點(diǎn)地圖）的網(wǎng)站，該菜單非常直觀，但在移動(dòng)視圖中毫無(wú)用處，因此我創(chuàng)建了另一個(gè)菜單以在移動(dòng)和小屏幕設(shè)備中顯示?？偨Y(jié)代碼如下：<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>問(wèn)題是：有沒(méi)有辦法根據(jù)視口寬度動(dòng)態(tài)更改“data-target”和“aria-controls”以在“desktopMenu”和“mobileMenu”之間進(jìn)行更改？我不知道這種方法是否正確/更好。如果我錯(cuò)了，請(qǐng)毫不猶豫地建議另一種方法。
1 回答
德瑪西亞99
TA貢獻(xiàn)1770條經(jīng)驗(yàn) 獲得超3個(gè)贊
在您的情況下，有兩種方法可以根據(jù)視口調(diào)整頁(yè)面。一種方法是使用@media-queries并顯示/隱藏具有該屬性的一個(gè)或另一個(gè)元素display。
這將允許您根據(jù)屏幕尺寸調(diào)整代碼。
@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
}
您可以設(shè)置width或height按照您的意愿設(shè)置。
這是有關(guān)媒體查詢的更多信息
您還可以獲取當(dāng)前視口值，如下所示：
// Size of browser viewport.
var width = window.innerWidth;
var height = window.innerHeight;
然后根據(jù)情況調(diào)整您的代碼：
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 關(guān)注
- 181 瀏覽
添加回答
舉報(bào)
0/150
提交
取消