以下のサンプルコードように 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>