BootStrapが秀逸すぎて、正直プログラミングの勉強してるのが馬鹿馬鹿しくなりそうです。
というのも、用意されているテンプレートがフロントエンドで必要とされるような機能がデフォルトで実装されているものがほとんどで、これあればいらねーんじゃねーの？って感じになってしまいます。
そんなBootStrapですがいくつか、なぞもあります。
大きなものとして、ハンバーガーメニュガー開きはしますが閉じません。
先に解決法から。
|
1 2 3 4 5 6 7 |
<script> $('.navbar-nav>li>a , .dropdown-menu>a').on('click', function(){ if(this.id != 'navbarDropdown'){ $('.navbar-collapse').collapse('hide'); } }); </script> |
上記コードをjqueryのscript記載の後に入れるだけです。
しかし、具体的にどこに入れればいいのか？が書いてある記事がありませんでした。
下記が完成形です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script> $('.navbar-nav>li>a , .dropdown-menu>a').on('click', function(){ if(this.id != 'navbarDropdown'){ $('.navbar-collapse').collapse('hide'); } }); </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script> |
jqueryがhtmlの最後の方で、書かれていると思いますが、その下に、インデントを下げて（enterキーで自動でさがるところまででOK）記載すれば、ハンバーガーメニューが閉じるようになります。
しかし、djangoでは、htmlを書くときに{% extends “〇〇html” %}と、基本的なhtmlの構成を同じにしてページごとに特徴的なコードを追記していく方法があります。
この記載がありながら、再度htmlにjquaryの記載があると挙動がおかしくなる時がありますので注意が必要です。
新着記事
【ポータブル電源】家族持ちなら即購入？ただし購入体験は最悪。
【買い！】echo show15の半年使用後レビュー
【保存版】顎骨壊死を懸念してビスホスホネート製剤の予防的休薬は不要！？
コメントをどうぞ
