###前提・実現したいこと
jQuery ドロップダウンメニューで最前面に表示し、後ろの画面が押されないようにドロップダウンメニューに背景をつけるコードを書いています。
以下がイメージ図です。イメージ図では「九州」のメニューが表示されていますが、コードでは「中部」のメニューを表示して、「九州」のボタンを覆う形で前面に項目を提示したいです。
###発生している問題・エラーメッセージ
項目が表示されないことと、イメージ通りに設計するにはどこを直せば良いかわからず困っています。
###該当のソースコード
HTML/CSS
1<html> 2<head> 3<style type="text/css"> 4div.controlbox { 5 text-align: center; 6 margin: 0.3em 0px 1em 0px; 7 } 8 9 .square_btn{ 10 display: inline-block; 11 padding: 0.5em 1em; 12 text-decoration: none; 13 background: #FF69B4;/*ボタン色*/ 14 color: #FFF; 15 border-bottom: solid 4px #FF69B4; 16 border-radius: 3px; 17} 18.square_btn:active {/*ボタンを押したとき*/ 19 -ms-transform: translateY(4px); 20 -webkit-transform: translateY(4px); 21 transform: translateY(4px);/*下に動く*/ 22 box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);/*影を小さく*/ 23 border-bottom: none; 24} 25 26 27span { 28 cursor: pointer; 29} 30 31li{ 32 list-style: none; 33} 34 35 36ul { 37 display: none; 38 position: absolute; 39} 40 </style> 41 42</head> 43 44<center> 45<p>ホテルを探す</p> 46<p> 47<a href="#" class="square_btn">▼北海道</a> 48 49<a href="#" class="square_btn">▼東北</a> 50 51<a href="#" class="square_btn">▼関東</a> 52 53<span><a href="#" class="square_btn">▼中部</a></span> 54<ul> 55<li><a href="#">新潟県</a> <a href="#">富山県</a> <a href="#">石川県</a></li> 56<li><a href="#">福井県</a> <a href="#">山梨県</a> <a href="#">長野県</a></li> 57<li><a href="#">岐阜県</a> <a href="#">静岡県</a> <a href="#">愛知県</a></li> 58</ul> 59</p> 60 61<p> 62<a href="#" class="square_btn">▼近畿</a> 63<a href="#" class="square_btn">▼中国</a> 64<a href="#" class="square_btn">▼四国</a> 65<a href="#" class="square_btn">▼九州</a> 66</p> 67 68</center> 69 70<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> 71<script> 72$(function () { 73 $('span').click(function() { 74 if ($(this).attr('class') == 'selected') { 75 // メニュー非表示 76 $(this).removeClass('selected').next('ul').slideUp('fast'); 77 } else { 78 // 表示しているメニューを閉じる 79 $('span').removeClass('selected'); 80 $('ul').hide(); 81 82 // メニュー表示 83 $(this).addClass('selected').next('ul').slideDown('fast'); 84 } 85 }); 86 87 // マウスカーソルがメニュー上/メニュー外 88 $('span,ul').hover(function(){ 89 over_flg = true; 90 }, function(){ 91 over_flg = false; 92 }); 93 94 // メニュー領域外をクリックしたらメニューを閉じる 95 $('body').click(function() { 96 if (over_flg == false) { 97 $('span').removeClass('selected'); 98 $('ul').slideUp('fast'); 99 } 100 }); 101}); 102</script> 103 104</html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/08/07 06:12