如何在點擊時關閉 Bootstrap 響應式選單？

點擊時關閉 Bootstrap 響應式選單

在行動裝置上查看網站時，使用導覽選單通常很麻煩。為了增強使用者體驗，希望在點擊選單項目時自動關閉響應式導覽欄，僅顯示所需的內容。

但是，應用 $('.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版本更新

對於 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中文網其他相關文章！