Q&A
やりたいこと
Semantic UIのサンプルページを参考にして、ドロップダウンを表示させようとしています。
Semantic UI Dropdown
https://semantic-ui.com/modules/dropdown.html
エラー
以下のようなサンプルを実行しましたが、
ドロップダウンをクリックしても動きません。
html
1<!-- jquery 読み込み --> 2<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 3<!-- semantic.js 読み込み --> 4<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css" integrity="sha256-iK7AZM7Xa42iuURdMdo1sp38ld/JJ3fDtS0523GKqdk=" crossorigin="anonymous" /> 5<!-- semantic.css 読み込み --> 6<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"> 7 8<div class="ui selection dropdown"> 9 Dropdown <i class="dropdown icon"></i> 10 <div class="menu"> 11 <div class="item">Item 1</div> 12 <div class="item">Item 2</div> 13 <div class="item">Item 3</div> 14 </div> 15</div> 16 17<script> 18 $('.ui.selection.dropdown').dropdown(); 19</script>
ブラウザで「検証」を見てみると、以下のJavascriptのエラーが発生しています。
test.html:18 Uncaught TypeError: $(...).dropdown is not a function at test.html:18
Semantic UIでドロップダウンが正常に動かせるようになりませんでしょうか？
ご回答お待ちしています。
### 環境
macOS High Sierra
MAMP
回答1件
0
ベストアンサー
エラーは「dropdownは関数ではない（未定義関数と解釈も可）」とのことなので、
提示のコードからその関数を読み込めていないことが伺えます。
dropdown.js
なり
dropdown.min.js
なり
読み込む必要があるのでは？
あと提示リンクに同梱のものであればdropdown.cssもですかね。
提示のコード内には記載がないようです。
動作させるのに必要なファイルの読み込みと、読み込み順番は再度確かめてみてください。
投稿2018/09/30 07:29
総合スコア80850
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/30 08:34
2018/09/30 08:43