1. ホーム
  2. html

[解決済み] Bootstrap 3 の折りたたみメニューがクリックで閉じない

2022-08-19 20:14:54

質問

私は、bootstrap 3から多かれ少なかれ標準的なナビゲーションを持っています。

<body data-spy="scroll" data-target=".navbar-collapse">
    <!-- ---------- Navigation ---------- -->
    <div class="navbar navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                </button>
                <a class="navbar-brand" href="index.html"> <img src="#"></a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#home">Home</a></li>
                    <li><a href="#one">One</a></li>
                    <li><a href="#two">Two</a></li>
                    <li><a href="#three">Three</a></li>
                    <li><a href="#four">Four</a></li>
                </ul>
            </div>
        </div>
    </div>

小さい端末では普通に折りたためます。メニューボタンをクリックするとメニューが展開されますが、メニューのリンクをクリック(またはタッチ)すると、メニューが開いたままになってしまいます。もう一度閉じるにはどうしたらよいのでしょうか?

どのように解決するのですか?

Bootstrapのデフォルト設定は、メニュー項目をクリックしたときに、メニューを開いたままにすることです。この動作を手動でオーバーライドするには .collapse('hide'); を呼び出すことで、この動作を手動で上書きすることができます。