jQueryでアコーディオン(メニューLINK部分)を作成しましたがIEで機能しません。
他のブラウザでは問題ありませんでした。
調べたところアコーディオンはIEは対応していないなどの記事を目にしましたが方法はないのでしょうか?
よろしくお願いいたします。
HTML
1コード 2<!DOCTYPE html> 3<html lang="ja"> 4 <head> 5 <meta charset="UTF-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <link 8 rel="stylesheet" 9 href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 10 /> 11 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 12 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> 13 <!-- ファーストビューのズームフェード --> 14 <link 15 rel="stylesheet" 16 href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css" 17 /> 18 <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script> 19 <!-- fontawesome --> 20 <link 21 rel="stylesheet" 22 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" 23 integrity="sha256-UzFD2WYH2U1dQpKDjjZK72VtPeWP50NoJjd26rnAdUI=" 24 crossorigin="anonymous" 25 /> 26 <title>SHOP</title> 27 <link rel="stylesheet" href="css/style.css" /> 28 </head> 29 <body data-spy="scroll" data-target="#navbarResponsive"> 30 <!--スクロールした所がアクティブになる--> 31 <!-- navimenu --> 32 <nav class="navbar navbar-expand-md navbar-light bg-white sticky-top"> 33 <div class="container-fluid"> 34 <div class="collapse navbar-collapse" id="navbarResponsive"> 35 <ul class="navbar-nav ml-auto"> 36 <li class="nav-item active"> 37 <a href="#" class="nav-link">TOP</a> 38 </li> 39 <li class="nav-item"> 40 <a href="#service" class="nav-link anchorlink">SERIVCE</a> 41 </li> 42 <li class="nav-item"> 43 <a href="#service" class="nav-link anchorlink">SERIVCE</a> 44 </li> 45 <li class="nav-item"> 46 <a href="#service" class="nav-link anchorlink">SERIVCE</a> 47 </li> 48 <li class="nav-item"> 49 <a href="#service" class="nav-link anchorlink">SERIVCE</a> 50 </li> 51 <li class="nav-item"> 52 <a href="#service" class="nav-link anchorlink">SERIVCE</a> 53 </li> 54 <li class="nav-item sns-menu"> 55 <a class="nav-link">LINK</a> 56 <ul class="sns"> 57 <li> 58 <a href="#" target="_blank" class="twitter" 59 ><i class="fab fa-twitter"></i 60 ></a> 61 </li> 62 <!-- /.twitter --> 63 <li> 64 <a href="#" target="_blank" class="facebook" 65 ><i class="fab fa-facebook-square"></i 66 ></a> 67 </li> 68 <!-- /.facebook --> 69 <li> 70 <a href="#" target="_blank" class="instagram" 71 ><i class="fab fa-instagram"></i 72 ></a> 73 </li> 74 <!-- /.instagram --> 75 </ul> 76 </li> 77 </ul> 78 </div> 79 </div> 80 </nav> 81 <!-- Javascript --> 82 <script src="js/script.js"></script> 83 </body> 84</html> 85
jQuery
1コード 2$(function () { 3 // SNSドロップダウン 4 $(".nav-link").on("click", function() { 5 $(this).next().slideToggle(); 6 }); 7}); 8
SCSS
1コード 2 3$green: #8bfac3; 4$blue: #7eacf5; 5*, 6*::before, 7*::after { 8 box-sizing: border-box; 9} 10 11html, 12body { 13 margin: 0; 14 padding: 0; 15} 16 17html { 18 /* ルートのフォントサイズを10pxに設定しておく */ 19 font-size: 62.5%; 20} 21 22body { 23 -moz-osx-font-smoothing: grayscale; 24 -webkit-font-smoothing: antialiased; 25 background: #fff; 26 color: #333; 27 font-size: 1.6em; /* ルートのフォントサイズを1.6em(16pxと同等のサイズ)に設定 */ 28 font-weight: 500; 29 line-height: 1.6; 30 overflow-x: hidden; 31} 32 33h1 { 34 font-size: 36px; 35 font-weight: bold; 36 37} 38h2 { 39 font-size: 24px; 40 41} 42 43article, 44aside, 45footer, 46header, 47nav, 48section, 49main { 50 display: block; 51} 52 53ul, 54li, 55img{ 56 border: 0; 57 margin: 0; 58 padding: 0; 59} 60 61a { 62 color: inherit; 63 outline: none; 64 transition: all 0.6s ease; 65 text-decoration: none; 66 &:hover { 67 text-decoration: none; 68 color: inherit; 69 } 70} 71 72a:hover { 73 transition: all 0.6s ease; 74} 75 76img { 77 border: none; 78 height: auto; 79 max-width: 100%; 80 vertical-align: top; 81} 82 83ul, 84li 85 { 86 list-style: none; 87} 88 89.content-wrapper { 90 width: 100%; 91 margin: 0 auto; 92 max-width: 1500px; 93} 94.inner { 95 max-width: 1100px; 96 margin: 0 auto; 97} 98.title { 99 text-align: center; 100} 101.subtitle { 102 text-align: center; 103 font-size: 3.6rem; 104 margin-top: 16px; 105 font-weight: bold; 106 107} 108.title-green { 109 background-color: $green; 110 padding-top: 30px; 111 padding-bottom: 30px; 112} 113.title-blue { 114 background-color: $blue; 115 padding-top: 30px; 116 padding-bottom: 30px; 117} 118 119/*========================== 120 NAVBAR 121============================*/ 122.container-fluid { 123 padding: 0; 124} 125nav { 126 height: 80px; 127 128} 129.navbar { 130 padding-right: 0; 131 padding-left: 0; 132 133} 134.nav-link { 135 margin-right: 30px; 136} 137.navbar-toggler-icon { 138 width: 30px; 139 height: 30px; 140} 141.sns-menu { 142 position: relative; 143 cursor: pointer; 144} 145.sns { 146 position: absolute; 147 top: 56px; 148 background-color: #fff; 149 display: none; 150} 151.fab { 152 font-size: 3rem; 153 margin-top: 10px; 154 margin-left: 10px; 155 margin-right: 10px; 156} 157.fa-twitter { 158 color: #55acee; 159} 160.fa-facebook-square { 161 color: #1d7fff; 162} 163.fa-instagram { 164 color: #8b09b2; 165}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/17 14:45