Q&A
実際に動作する環境は用意できませんでしょうか？ playcode.io とか codepen.io とかで
実現したいこと
html・cssは理解しているもののjavascriptやphpのスキルは持ち合わせていない者です。
多階層ヘッダーナビが必要だったので、下記のデモサンプルを参考にサイトを運営中です。
うぇぶもよう様 https://webmoyou.com/web/703/
公開時点でjquery v3.4.1を使用して、その後何の問題も無いのですが、現況最新であるjQuery v3.7.1でテストページを作ってみたら、ハンバーガーメニューの表示がおかしくなりました。
開く前は三本線、開いたときは×になるようにしたいのです。
発生している問題・分からないこと
開く前の三本線が一本線しか表示されず、開いたときの×状態が著しくずれて表示されます。
デベロッパーツールで見ると、線となる<span>が下記の様にネストされています。
<span><span><span></span></span></span>
該当のソースコード
html
1<!DOCTYPE HTML> 2<html lang="ja"> 3 4<head> 5<meta charset="UTF-8"> 6<meta http-equiv="X-UA-Compatible" content="IE=Edge"> 7<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> 8<link rel="stylesheet" type="text/css" href="style.css" media="all" /> 9<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" media="all" /> 10<title>sample</title> 11 12<script src="js/jquery.min-3.7.1.js"></script> 13 14<link rel="stylesheet" type="text/css" href="css/meanmenu.css" /> 15<script src="js/jquery.meanmenu.min.js"></script> 16<script type="text/javascript"> 17$(function($){ 18 //メニューの表示状態保管用 19 var state = false; 20 //.bodyのスクロール位置 21 var scrollpos = 0; 22 //meanmenuの状態による表示制御 23 function mm_control() { 24 if($('.mean-nav .nav').is(':visible')) { 25 //表示中 26 if(state == false) { 27 scrollpos = $(window).scrollTop(); 28 $('body').addClass('fixed').css({'top': -scrollpos}); 29 $('.mean-container').addClass('open'); 30 $('.mean-nav .mask').show(); 31 state = true; 32 } 33 } else { 34 //非表示中 35 if(state == true) { 36 $('body').removeClass('fixed').css({'top': 0}); 37 window.scrollTo( 0 , scrollpos ); 38 $('.mean-container').removeClass('open'); 39 $('.mean-nav .mask').hide(); 40 state = false; 41 } 42 } 43 } 44 45 $('#gNav').meanmenu({ 46 meanMenuContainer: "#header .h_nav", // メニューを表示させる位置 47 meanScreenWidth: "768" 48 }); 49 $(document) 50 .on('opend.meanmenu closed.meanmenu', function() { 51 mm_control(); 52 }) 53 .on('touchend click', '.mean-bar .mask', function(e) { 54 $('.mean-bar .meanmenu-reveal').trigger('click'); 55 return false; 56 }); 57 //ウィンドウサイズ変更によるメニュー非表示時の制御 58 $(window).on('resize', function() { 59 mm_control(); 60 }); 61}); 62</script> 63 64</head> 65<body> 66 67<header id="header"> 68 <div class="container"> 69 <div id="h_top"> 70 <div class="h_logo">sample</div> 71 <div class="h_nav"> 72 <nav id="gNav"> 73 <ul class="nav"> 74 <li> 75 <a href="">MENU<i class="fa fa-angle-down"></i></a> 76 <ul class="sub-menu"> 77 <li><a href="">submenu</a></li> 78 <li><a href="">submenu</a></li> 79 <li><a href="">submenu</a></li> 80 <li><a href="">submenu</a></li> 81 <li><a href="">submenu</a></li> 82 </ul> 83 </li> 84 <li> 85 <a href="">MENU<i class="fa fa-angle-down"></i></a> 86 <ul class="sub-menu"> 87 <li><a href="">submenu</a></li> 88 <li><a href="">submenu</a></li> 89 <li><a href="">submenu</a></li> 90 <li><a href="">submenu</a></li> 91 <li><a href="">submenu</a></li> 92 </ul> 93 </li> 94 <li><a href="">MENU</a></li> 95 <li><a href="">MENU</a></li> 96 <li><a href="">MENU</a></li> 97 </ul> 98 <div class="mask"></div> 99 </nav> 100 </div> 101 </div> 102 </div> 103</header> 104 105<main id="main" role="main"> 106 <section id="sec01"> 107 コンテンツ 108 </section> 109 110 <section id="sec02"> 111 コンテンツ 112 </section> 113 114 <section id="sec03"> 115 コンテンツ 116 </section> 117 118</main> 119 120 121<footer id="footer"> 122 <div class="container"> 123 <p class="copy">footer</p> 124 </div> 125</footer> 126 127</body> 128</html>
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
chatGPTやCopilotの生成AIで質問してみましたが、解決できなかったため、ぜひともお力をお貸し頂きたく質問させて頂きます。
よろしくお願い致します。
補足
不足情報は↓codepenで大丈夫でしょうか？
https://codepen.io/MayMayMayMay/pen/OJKeOrq
回答2件
0
ベストアンサー
以下の部分の<span />のような自己終了タグになっているものを
JavaScript
1meanMenuClose: "<span /><span /><span />", 2meanMenuCloseSize: "", 3meanMenuOpen: "<span /><span /><span />",
<span></span>のようにちゃんと閉じてあげたら直ります。
JavaScript
1meanMenuClose: "<span></span><span></span><span></span>", 2meanMenuCloseSize: "", 3meanMenuOpen: "<span></span><span></span><span></span>",
HTML5では<link>や<img>のような、中身に何も入れないタグ以外は自己終了タグが正しく解釈されないことがあるようです。
投稿2024/11/21 01:25
総合スコア11
jQuery3.5.0から終了タグに関するアップデートがあったみたいなので、それが原因ですね。
ご回答ありがとうございます。
試したところ問題が解決しました！
ベストアンサーに選ばせていただきました。
＞jQuery3.5.0から終了タグに関するアップデートがあったみたいなので、それが原因ですね。
↑
なるほど～！！！
0
同様の Issue があるようです。
Replace meanMenuOpen:"</span></span></span>" with meanMenuOpen:"<span></span><span></span><span></span>"
Bars icon not being rendered with jQuery 3.6.0 and jQuery migrate 3.3.2 · Issue #89 · meanthemes/meanMenu
このあたりのアップデートが原因ですかね……？
The HTML parser in jQuery <=3.4.1 usually did the right thing, but there were edge cases where parsing would have unintended consequences. The jQuery team agreed it was necessary to fix this in a minor release, even though some code relies on the previous behavior and may break. The jQuery.htmlPrefilter function does not use a regex in 3.5.0 and passes the string through unchanged.
jQuery 3.5.0 Released! | Official jQuery Blog
投稿2024/11/20 04:33
編集2024/11/20 04:37
総合スコア36912
あなたの回答
tips
プレビュー
