###前提・実現したいこと
以下のサイトを参考にしてjQuery ドロップダウンメニューを作成しています。
参考サイト
###発生している問題・エラーメッセージ
以下のコードでドロップダウンメニューに表示されたメニュー1のteratailをクリックしても指定したURLに飛ばないので困っています。
###該当のソースコード
HTML
1<html> 2<head> 3 4<style> 5#menu div { 6 position: relative; 7} 8 9span { 10 cursor: pointer; 11} 12 13ul { 14 display: none; 15 position: absolute; 16} 17</style> 18 19<body> 20<div id="menu"> 21<div> 22<span>メニュー 1</span> 23<ul> 24<li><a href="https://teratail.com/">teratail</a></li> 25<li><a href="#">メニュー 1-2</a></li> 26<li><a href="#">メニュー 1-3</a></li> 27</ul> 28</div> 29<div> 30<span>メニュー 2</span> 31<ul> 32<li><a href="#">メニュー 2-1</a></li> 33<li><a href="#">メニュー 2-2</a></li> 34<li><a href="#">メニュー 2-3</a></li> 35</ul> 36</div> 37<div> 38<span>メニュー 3</span> 39<ul> 40<li><a href="#">メニュー 3-1</a></li> 41<li><a href="#">メニュー 3-2</a></li> 42<li><a href="#">メニュー 3-3</a></li> 43</ul> 44</div> 45</div> 46 47<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> 48<script> 49$(function () { 50 $('span').click(function() { 51 if ($(this).attr('class') == 'selected') { 52 // メニュー非表示 53 $(this).removeClass('selected').next('ul').slideUp('fast'); 54 } else { 55 // 表示しているメニューを閉じる 56 $('span').removeClass('selected'); 57 $('ul').hide(); 58 59 // メニュー表示 60 $(this).addClass('selected').next('ul').slideDown('fast'); 61 } 62 }); 63 64 // マウスカーソルがメニュー上/メニュー外 65 $('span,ul').hover(function(){ 66 over_flg = true; 67 }, function(){ 68 over_flg = false; 69 }); 70 71 // メニュー領域外をクリックしたらメニューを閉じる 72 $('body').click(function() { 73 if (over_flg == false) { 74 $('span').removeClass('selected'); 75 $('ul').slideUp('fast'); 76 } 77 }); 78}); 79</script> 80 81</body> 82 83</head> 84</html> 85
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。