BootstrapのDropDownメニューで苦戦した記録

背景

本記事は、BootstrapのDropDownメニューで動作がおかしかったり、開かない、閉じないなどいろいろ問題が多すぎて、整理しました。

間違った認識の整理

1. 必要なjsはなにか？
2. 組み合わせで動作がいろいろ変わる
3. HTMLの書き方も2通りある
4. 情報が混乱、chatGPTも正確なアドバイスもらえず

前提条件

同じページに、DropDownメニューだけではなく、navバーも共存していること
DropDownメニューが正常動作した場合は、Navバーが動作しなくなることが発生
また逆も発生！！！

結論

1. navバーの動作前提は以下のバンドル（bootstrap.bundle.min.js）を読み込ませるのが必須

<script src="{{ url_for('static', filename='/js/bootstrap.bundle.min.js')}}"></script>

2.DropDownメニューは、jquery版からJavaScriptで書き直し（ある意味では、Javascriptは便利）
JQueryを使うと3行で書ける

$(document).ready(function () {
        $('.dropdown-toggle').dropdown();
    });

JavaScriptだといっぱい書かないといけない

document.addEventListener('DOMContentLoaded', function() {
    var dropdownToggleList = document.querySelectorAll('.dropdown-toggle');
    dropdownToggleList.forEach(function(dropdownToggle) {
        dropdownToggle.addEventListener('click', function() {
            var dropdownMenu = dropdownToggle.nextElementSibling;
            if (dropdownMenu.classList.contains('show')) {
                dropdownMenu.classList.remove('show');
            } else {
                // Close all other dropdowns
                var openDropdowns = document.querySelectorAll('.dropdown-menu.show');
                openDropdowns.forEach(function(openDropdown) {
                    if (openDropdown !== dropdownMenu) {
                        openDropdown.classList.remove('show');
                    }
                });
                dropdownMenu.classList.add('show');
            }
        });
    });

    // Close dropdown when clicking outside
    document.addEventListener('click', function(event) {
        var isDropdownTarget = Array.from(dropdownToggleList).some(function(dropdownToggle) {
            return dropdownToggle.contains(event.target);
        });
        
        var dropdownMenus = document.querySelectorAll('.dropdown-menu');
        dropdownMenus.forEach(function(dropdownMenu) {
            if (!dropdownMenu.contains(event.target) && !isDropdownTarget) {
                dropdownMenu.classList.remove('show');
            }
        });
    });
  });

HTML本体は

<div class="container mt-5">
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown Menu
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">Item 1</a>
      <a class="dropdown-item" href="#">Item 2</a>
      <a class="dropdown-item" href="#">Item 3</a>
    </div>
  </div>
</div>

<!--　不要　嫑-->
<!-- <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> -->
<!-- <script src="{{ url_for('static', filename='/js/bootstrap.min.js')}}"></script> -->
<script src="{{ url_for('static', filename='/js/dropdown.js')}}"></script>
<script src="{{ url_for('static', filename='/js/bootstrap.bundle.min.js')}}"></script>

注意点

※JQueryで作成前提のページには向かない