如何在點擊專案時自動關閉 Bootstrap 響應式選單？

Bootstrap：點擊選單項目時自動關閉響應式選單

在Bootstrap 中顯示響應式選單時，您可能會想要自動關閉選單在行動裝置或平板裝置上點選選單項目後，同時保持開啟狀態桌面。

問題：

使用者嘗試使用$('.btn-navbar').click();和$('.nav-collapse').toggle( );來實現此行為，但它導致選單在桌面上意外縮小。

解決方案：

要解決此問題，請修改選單項目以包含 data-toggle和資料目標屬性，就像使用導覽列切換按鈕一樣。例如，對於「產品」選單項目：

<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 版本更新：

• Bootstrap v4.1.3 和v5.0: 將可見/隱藏類別替換為d-none d-sm-block 和d-block d-sm-none。
• Bootstrap v5: 將 data-toggle 替換為 data-bs-toggle，將 data-target 替換為 data-bs-target。

透過實作這些修改，您可以在按一下選單項目時自動關閉響應式選單，同時保持其在桌面上的功能裝置。

以上是如何在點擊專案時自動關閉 Bootstrap 響應式選單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！