背景

web開発をしていて、トグルメニュー作ろうとしてた。やり方としてはjquery.min.jsをダウンロードしてローカルから読み込む。

デベロッパーツール使ってファイルが読み込めていることは確認できているが、ドロップダウンのボタンを押しても、中身のリストが表示されない。

コードの訂正前

何が間違っているのか、クイズです、笑
ここに大きな間違いが一個あります。。。たぶんbootstrapのdocumentとか見れば書いてあるのかもだけど見なかった（）

dropdown.html


<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>practice of bootstrap</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

    </head>
    <body>


    <div class='container'>     
        <div class='row'>
            <div class='col-xs-12'>

                <div class='dropdown'>
                    <button class='btn btn-default dropdown-toggle' type='button' id='dropdownmenu' data-toggle='dropdown'>
                        Dropdown
                        <span class='caret'></span>
                    </button>
                    <ul class='dropdown-menu' aria-labelled-by ='dropdownmenu'>
                        <li><a href="#">1 Some text</a></li>
                        <li><a href="#">2 Some text</a></li>
                        <li><a href="#">3 Some text</a></li>
                    </ul>

                </div>
            </div>
        </div>
    </div>
    <script src = 'js/bootstrap.min.js'></script>
    <script src = 'js/jquery.min.js'></script>

    </body>
</html>

正解は。。

javascriptを読み込んでいるところの順番がいけなかったみたい。

jquery.jsがbootstrap.jsよりも後にあると、
諸々正常に動作しないことがある。

っていう現状らしい。こんなささいなことに一時間費やしたんだから、もう絶対覚えて２度とこんなしょうもない間違いはしない。。

次から順番入れ替えも試してみることにしょう。

bootstrapのdropdownメニューを作るときに注意したいjquery読み込みのルール

背景

コードの訂正前

正解は。。