Bootstrap4のドロップダウンメニューが関連付け出来ない

Bootstrap4を使用して、ボタン・メニューを作成中です。
このメニューにボタン7つを設置し、うち3つをドロップダウンにしたいのです。

見た目は実現した様に見えますが、2つ目と3つ目のドロップダウンボタンをクリックしても、その内容が全て、1つ目のドロップダウンメニューの内容になってしまいます。

ドロップダウンの関連付けが上手く出来てないと思いますが、どこが誤っているのが分かりません。
ど素人の私に、どなたか御教示頂けないでしょうか?
よろしくお願い致します。

以下が、その内容です。
(なお、コード末の｢</html>ード｣は、私のコピーミスでした。ご指摘いただきましたので、正しく｢</html>｣と訂正致しました。申し訳ありませんでした。)
(また、｢dropdownmenu.js｣について問合せ頂きましたが、Bootstrap4導入の参考にさせて頂いた、
https://allabout.co.jp/gm/gc/393078/2/
を読み違いてしまいました。申し訳ありません。

については、削除致しました。)


<!doctype html>
<html lang="ja">
<head>
 <title>ドロップダウンメニュー</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
 <div class="container">
  <div class="row">
   <div class="col-md-3">
    <div class="btn-group-vertical btn-block">
     <a class="btn btn-outline-primary btn-sm" href="#">ボタン1</a>
     <a class="btn btn-primary btn-sm dropdown-toggle" id="dropdown1" data-toggle="dropdown" href="#">DDボタン2</a>
     <div class="dropdown-menu btn-block" aria-labelledby="dropdown1">
      <a class="dropdown-item" href="#">DD2メニュー1</a>
      <a class="dropdown-item" href="#">DD2メニュー2</a>
      <a class="dropdown-item" href="#">DD2メニュー3</a>
     </div><!-- /.dropdown-menu -->
     <a class="btn btn-primary btn-sm dropdown-toggle" id="dropdown2" data-toggle="dropdown" href="#">DDボタン3</a>
     <div class="dropdown-menu btn-block" aria-labelledby="dropdown2">
      <a class="dropdown-item" href="#">DD3メニュー1</a>
      <a class="dropdown-item" href="#">DD3メニュー2</a>
      <a class="dropdown-item" href="#">DD3メニュー3</a>
      <a class="dropdown-item" href="#">DD3メニュー4</a>
      <a class="dropdown-item" href="#">DD3メニュー5</a>
     </div><!-- /.dropdown-menu -->
     <a class="btn btn-primary btn-sm dropdown-toggle" id="dropdown3" data-toggle="dropdown" href="#">DDボタン4</a>
     <div class="dropdown-menu btn-block" aria-labelledby="dropdown3">
      <a class="dropdown-item" href="#">DD4メニュー1</a>
      <a class="dropdown-item" href="#">DD4メニュー2</a>
      <a class="dropdown-item" href="#">DD4メニュー3</a>
      <a class="dropdown-item" href="#">DD4メニュー4</a>
     </div><!-- /.dropdown-menu -->
     <a class="btn btn-primary btn-sm" href="#">ボタン5</a>
     <a class="btn btn-primary btn-sm" href="#">ボタン6</a>
     <a class="btn btn-primary btn-sm" href="#">ボタン7</a>
    </div><!-- /.btn-group -->
   </div>
  </div>
 </div>
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>ード

m.ts10806

2019/04/30 07:54

コードブロックの「ード」は何でしょう？なるべく実際のコード以外は入れないように調整いただければと

m.ts10806

2019/04/30 08:04

dropdownmenu.jsの中身はどうなっていますか？

asa_1

2019/04/30 09:07

コードの誤りをご指摘頂きましたので、以下の2点を訂正致しました。 ①コード末の｢</html>ード｣を、正しく｢</html>｣と訂正 ②｢dropdownmenu.js｣を含めたscript文ついては削除

行動規範の内容に同意します

回答1件

ベストアンサー

各ドロップダウンメニューを、dropdownクラスを付与した要素で囲むことで、今回の問題は解決すると思います(動作確認用リンク)。

HTML
1<!doctype html>
2<html lang="ja">
3
4<head>
5  <title>ドロップダウンメニュー</title>
6  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
7</head>
8
9<body>
10  <div class="container">
11    <div class="row">
12      <div class="col-md-3">
13        <div class="btn-group-vertical btn-block">
14          <a class="btn btn-outline-primary btn-sm" href="#">ボタン1</a>
15          <div class="dropdown w-100">
16            <a class="btn btn-primary btn-sm dropdown-toggle" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">DDボタン2</a>
17            <div class="dropdown-menu btn-block" aria-labelledby="dropdown1">
18              <a class="dropdown-item" href="#">DD2メニュー1</a>
19              <a class="dropdown-item" href="#">DD2メニュー2</a>
20              <a class="dropdown-item" href="#">DD2メニュー3</a>
21            </div>
22            <!-- /.dropdown-menu -->
23          </div>
24          <div class="dropdown w-100">
25            <a class="btn btn-primary btn-sm dropdown-toggle" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">DDボタン3</a>
26            <div class="dropdown-menu btn-block" aria-labelledby="dropdown2">
27              <a class="dropdown-item" href="#">DD3メニュー1</a>
28              <a class="dropdown-item" href="#">DD3メニュー2</a>
29              <a class="dropdown-item" href="#">DD3メニュー3</a>
30              <a class="dropdown-item" href="#">DD3メニュー4</a>
31              <a class="dropdown-item" href="#">DD3メニュー5</a>
32            </div>
33            <!-- /.dropdown-menu -->
34          </div>
35          <div class="dropdown w-100">
36            <a class="btn btn-primary btn-sm dropdown-toggle" id="dropdown3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">DDボタン4</a>
37            <div class="dropdown-menu btn-block" aria-labelledby="dropdown3">
38              <a class="dropdown-item" href="#">DD4メニュー1</a>
39              <a class="dropdown-item" href="#">DD4メニュー2</a>
40              <a class="dropdown-item" href="#">DD4メニュー3</a>
41              <a class="dropdown-item" href="#">DD4メニュー4</a>
42            </div>
43            <!-- /.dropdown-menu -->
44          </div>
45          <a class="btn btn-primary btn-sm" href="#">ボタン5</a>
46          <a class="btn btn-primary btn-sm" href="#">ボタン6</a>
47          <a class="btn btn-primary btn-sm" href="#">ボタン7</a>
48        </div>
49        <!-- /.btn-group -->
50      </div>
51    </div>
52  </div>
53  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
54  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
55  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
56</body>
57
58</html>

投稿2019/04/30 09:18

s8_chu

総合スコア14731

asa_1

2019/04/30 13:13

解決しました。ありがとうございました。 Bootstrap4でのドロップダウンメニューを作り始めた当初に、class="dropdown"指定をclass="btn-group-vertical"に含めて居りました。この位置でのクラス指定では、dropdownが意味をなさなかったので、除去してしまいました。教えて戴いた通り、ドロップダウンメニュー毎にclass="dropdown"指定する事により、解決致しました。 1ヶ月以上悩んでいた事が、僅か1日足らずで解決致しました。どうもありがとうございました。

行動規範の内容に同意します