0

以下のサンプルコードように 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 でも同様にエラーが発生します。

<!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="#">メニュー1</a></li>
          <li class="drawer-dropdown"><a class="drawer-menu-item" href="#" data-toggle="dropdown">メニュー2 <span class="drawer-caret"></span></a>
            <ul class="drawer-dropdown-menu">
              <li><a class="drawer-dropdown-menu-item" href="#">ドロップ1</a></li>
              <li><a class="drawer-dropdown-menu-item" href="#">ドロップ2</a></li>
              <li><a class="drawer-dropdown-menu-item" href="#">ドロップ3</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </header>
    <main role="main">
    </main>

    <script>
      $(document).ready(function() {
    $('.drawer').drawer();
      });
    </script>
  </body>

</html>

1 件の回答 1

2

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

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

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

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

<!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="#">メニュー1</a></li>                                                                             
          <li class="drawer-dropdown"><a class="drawer-menu-item" href="#" data-toggle="dropdown">メニュー2 <span class="drawer-caret"></span></a>
            <ul class="drawer-dropdown-menu dropdown-menu"> <!-- ← 1. ここにdropdown-menuクラスを追加 -->                                          
              <li><a class="drawer-dropdown-menu-item" href="#">ドロップ1</a></li>                                                                
              <li><a class="drawer-dropdown-menu-item" href="#">ドロップ2</a></li>                                                                
              <li><a class="drawer-dropdown-menu-item" href="#">ドロップ3</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>
1
  • ご回答ありがとうございます。教えていただいた方法で解決することができました。
    – oya3
    Commented 2018年12月13日 23:57

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。