在行動裝置上查看網站時,使用導覽選單通常很麻煩。為了增強使用者體驗,希望在點擊選單項目時自動關閉響應式導覽欄,僅顯示所需的內容。
但是,應用 $('.btn-navbar').click( ) 或 $('.nav-collapse').toggle() 可能會對桌面視圖產生不良影響,例如選單短暫收縮。若要獲得更有效的解決方案,請考慮以下措施:
要指定響應式選單應在按一下選單項目時關閉,請新增data-toggle= "collapse" 和data-target=".navbar-collapse" 屬性到對應的元素,如下所示例如:
<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>
對每個選單項目重複此程序。透過這樣做,選單將根據佈局的響應性質切換其可見性。
如果您在上述解決方案中遇到任何溢位或閃爍問題,您可以實現以下修改:
<li><a href="#products" class="hidden-xs">Products</a></li> <li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>
將螢幕尺寸特定的類別分配給選單項目可以有效解決這些問題,確保無論裝置如何都能無縫操作
對於 Bootstrap v4.1.3 和 v5.0,可見/隱藏類別必須替換為 d-none/d-sm-block 和 d-block分別為 /d-sm-none。
在 Bootstrap v5 中,取代 data-toggle 和 data-target屬性分別為 data-bs-toggle 和 data-bs-target。
遵循這些準則,您可以確保響應式 Bootstrap 導航選單在點擊選單項目時自動關閉,從而提供增強的使用者體驗。
以上是如何在點擊時關閉 Bootstrap 響應式選單?的詳細內容。更多資訊請關注PHP中文網其他相關文章!