bootstrapでクリックしてもドロップダウン（ツリー）のメニューが表示されない

Question

以下のようなnavが書かれたhtmlタグがありこの中にドロップダウン要素を書きドロップダウンメニューを実装したいです

    <div class="nav-scroller bg-purple shadow-sm">
        <nav class="nav nav-underline">
            <a class="nav-link active" href="#">Swipe</a>
        </nav>
　　 </div>

しかしインターネットで調べたりしたbootstrapのドロップダウンのタグやクラスを追加しても書いてもドロップダウンが展開されないです。

上の画像を表示させているドロップダウンのクラスやタグを追加したコードは以下のものになります。

    <div class="nav-scroller bg-purple shadow-sm">
        <nav class="nav nav-underline">
            <a class="nav-link active" href="#">Swipe</a>
            <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Settings</a>
                    <div class="dropdown-menu" aria-labelledby="dropdown01">
                        <a class="dropdown-item" href="#">link</a>
                        <a class="dropdown-item" href="#">link</a>
                        <a class="dropdown-item" href="#">link</a>
                    </div>
                </li>
        </nav>
    </div>

何が原因でドロップダウンメニューを展開することができないのでしょうか？
何かの要素が邪魔しているのでしょうか？
ずっと迷っております。。。宜しくお願い致します。

Comments

[m.ts10806]

バージョンは4ですか？JavaScript側の記述はどうなってますか？確か対象の要素にドロップダウン反映の指定をする記述が必要だったと思いますが、公式ドキュメントを参照された方がいいですね。

Answer 1

JavaScriptの読み込みに問題があると思われます。
ドロップダウンを動かすにはスクリプト3ファイルを読んでいる必要がありますが、書いてあるでしょうか？
https://getbootstrap.com/docs/4.1/getting-started/introduction/#js

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Comments

[phpsyoshinsya]

質問者ではありませんがすみません。
やはり<button>タグがないというのは私の意図は合っていたのでしょうか？

jqueryも必要なコードだったのですね？
あまり自信を持った回答ではなかったので、心配していました。
そんなにこの分野は得意ではないので…。

私が上で書いたアクセシビリティに関する意見もいただけるとうれしく思います。

[x_x]

Bootstrapがあらかじめ持っている機能なので、スクリプト(とCSS)さえ正しく読み込んでいれば質問者さんが提示したHTMLのみで動作します。

[phpsyoshinsya]

ご丁寧にありがとうございます。

つまりjqueryはいらなかったということですか？

<button>タグも不要だと言えるのでしょうか？

[x_x]

回答を見てください

[widget11]

メタタグで指定していなかったみたいです。ありがとうございます。

[phpsyoshinsya]

無事解決したようでよかったです。

今後ともよろしくお願いします。

Answer 2

おそらくjqueryが入っていないとか、<button>タグがないとか、onclickイベントがないとかだと思われます。

ただ、目が見えないでPCもAndroidもスクリーンリーダーが必須な私から見ても、アクセシビリティが高いとは言えないですがそのあたりはサイト設計にあたって考慮していただいていますでしょうか。

たとえば、このサイトには初心者アイコンがあるそうですが、スクリーンリーダーではフォーカスしてくれないのでアイコンを追加したくてもできません。
また、コードを見たところ、ドロップダウンが開くと別の<div>エリアに書き出そうとしているようなのですが、それではボタンをおしても反応したとしても、項目がどこに表示されるかタブオーダーで探しに行くのは困難を極めます。

デザイン的にはすっきりしていいのでしょうが、どうかユーザビリティやアクセシビリティにも配慮したサイト構成をお願いしたいです。
これは、私のプロフィールのページですが、onmouseoverイベントを使用しており、それではスクリーンリーダー使用者には伝わらないので、onclickイベントも同時に入れてalertで情報が見れるように配慮したことがあります。
個人情報満載なので、コードの提示は遠慮させていただくことをご了承ください。