51173


以下のサンプルコードように bootstrap3 で実行すると上手く動作するのですが、bootstrap4 で動作させるとエラーが発生してしまいます。  
具体的には、bootstrap3.3.7 の代わりに、bootstrap4.1.3 と popper1.14.6
を導入してみましたが、以下のエラーが発生します。  
このエラーを取るにはどうのように対応するべきなのでしょうか？  
そもそも bootstrap4 との組み合わせは無理なのでしょうか？  
UI設計／実装共にあまり知識がなく困っております。  
宜しくお願い致します。

発生しているエラー：

> applyStyle.js:66 Uncaught TypeError: Cannot read property 'setAttribute' of
> null  
>  at Object.applyStyleOnLoad [as onLoad] (applyStyle.js:66)  
>  at index.js:69  
>  at Array.forEach ()  
>  at new Popper (index.js:67)  
>  at c.t.toggle (dropdown.js:177)  
>  at HTMLAnchorElement. (dropdown.js:328)  
>  at Function.each (jquery.min.js:2)  
>  at w.fn.init.each (jquery.min.js:2)  
>  at w.fn.init.c._jQueryInterface [as dropdown] (dropdown.js:315)  
>  at HTMLAnchorElement. (dropdown.js:472)

実行しているサンプル：  
※bootstrap3を無効にし、コメントしている箇所(bootstrap4+popper)を有効にすると上記エラーが発生します。  
※また popper 内包の bootstrap.bundle.js でも同様にエラーが発生します。

[code]

    <!DOCTYPE html>
    <html>
      <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.js"></script> -->
        <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script> -->
    
      </head>
      <body class="drawer drawer--left">
        <header role="banner">
          <button type="button" class="drawer-toggle drawer-hamburger">
            <span class="sr-only">toggle navigation</span>
            <span class="drawer-hamburger-icon"></span>
          </button>
          <nav class="drawer-nav" role="navigation">
            <ul class="drawer-menu">
              <li><a class="drawer-brand" href="#">スライドメニュー</a></li>
              <li><a class="drawer-menu-item" href="#">メニュー１</a></li>
              <li class="drawer-dropdown"><a class="drawer-menu-item" href="#" data-toggle="dropdown">メニュー２ <span class="drawer-caret"></span></a>
                <ul class="drawer-dropdown-menu">
                  <li><a class="drawer-dropdown-menu-item" href="#">ドロップ１</a></li>
                  <li><a class="drawer-dropdown-menu-item" href="#">ドロップ２</a></li>
                  <li><a class="drawer-dropdown-menu-item" href="#">ドロップ３</a></li>
                </ul>
              </li>
            </ul>
          </nav>
        </header>
        <main role="main">
        </main>
    
        <script>
          $(document).ready(function() {
        $('.drawer').drawer();
          });
        </script>
      </body>
    
    </html>
    
[/code]


CC BY-SA 4.0
2018-12-13T04:47:38.463
51162
2018-12-13T08:02:49.637
2018-12-13T05:00:00.007
13909
13909
question
javascript jquery
bootstrap4 を利用して drawer-menu の drawer-dropdown-menu の動作のさせ方


根本的には、使用されているライブラリ **drawerがbootstrap4に対応していない**
ことが原因となります。drawerの更新は2017年4月を最後に停止していますから、2018年に正式版が登場したbootstrap4に対応していないのはやむ無しと言えるかもしれません。

少し調べたところ、以下の2点の応急処置を行うことでbootstrap4を使用しながら動作させることができました。

  1. `drawer-dropdown-menu`クラスと一緒に`dropdown-menu`クラスを追加。（これがないとbootstrapがドロップダウンメニューを認識できずにエラーとなるため）
  2. 開閉時にbootstrapにより付加されるクラスが`open`から`show`に変わっているので、従来の`open`を付け外しするコードを追加。

以上を行うように変更したのが以下のコードです。

[code]

    <!DOCTYPE html> 
    <html>                                                                                                                                             
      <head>                                                                                                                                           
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">                                          
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>                                                      
        <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>                                                    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>                                                   
        <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> -->                            
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
    
      </head>                                                                                                                                          
      <body class="drawer drawer--left">                                                                                                               
        <header role="banner">                                                                                                                         
          <button type="button" class="drawer-toggle drawer-hamburger">                                                                                
            <span class="sr-only">toggle navigation</span>                                                                                             
            <span class="drawer-hamburger-icon"></span>                                                                                                
          </button>                                                                                                                                    
          <nav class="drawer-nav" role="navigation">                                                                                                   
            <ul class="drawer-menu">                                                                                                                   
              <li><a class="drawer-brand" href="#">スライドメニュー</a></li>                                                                           
              <li><a class="drawer-menu-item" href="#">メニュー１</a></li>                                                                             
              <li class="drawer-dropdown"><a class="drawer-menu-item" href="#" data-toggle="dropdown">メニュー２ <span class="drawer-caret"></span></a>
                <ul class="drawer-dropdown-menu dropdown-menu"> <!-- ← 1. ここにdropdown-menuクラスを追加 -->                                          
                  <li><a class="drawer-dropdown-menu-item" href="#">ドロップ１</a></li>                                                                
                  <li><a class="drawer-dropdown-menu-item" href="#">ドロップ２</a></li>                                                                
                  <li><a class="drawer-dropdown-menu-item" href="#">ドロップ３</a></li>                                                                
                </ul>                                                                                                                                  
              </li>                                                                                                                                    
            </ul>                                                                                                                                      
          </nav>                                                                                                                                       
        </header>                                                                                                                                      
        <main role="main">                                                                                                                             
        </main>                                                                                                                                        
           <script>                                                                                                                                    
          $(document).ready(function() {                                                                                                               
        $('.drawer').drawer();
        // ↓ 2. ドロップダウンが開閉したときにopenクラスを変更するコードを追加                                                                         
        $('.drawer-dropdown').on('show.bs.dropdown', function(){                                                                                       
          $(this).addClass("open");                                                                                                                    
        });
        $('.drawer-dropdown').on('hide.bs.dropdown', function(){                                                                                       
          $(this).removeClass("open");                                                                                                                 
        });
          });
        </script>
      </body>
    
    </html>
    
[/code]


CC BY-SA 4.0
2018-12-13T07:54:09.957
51173
2018-12-13T08:02:49.637
2018-12-13T08:02:49.637
30079
30079
51162
answer