jQuery ドロップダウンメニューで最前面に表示し、後ろの画面が押されないようにドロップダウンメニューに背景をつけるには

###前提・実現したいこと
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>&nbsp<a href="#">富山県</a>&nbsp<a href="#">石川県</a></li>
56<li><a href="#">福井県</a>&nbsp<a href="#">山梨県</a>&nbsp<a href="#">長野県</a></li>
57<li><a href="#">岐阜県</a>&nbsp<a href="#">静岡県</a>&nbsp<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件

ベストアンサー

ブラウザでF12を押したらデベロッパーツールが表示されます。
これで具体的なタグ構成がどうなっているのか確認できますし、それ以外にもjavascriptのデバッグに便利な機能が備わってますので、使い方を覚えましょう。

で、動かないポイントは、pタグのせいです。デベロッパーツールで確認したらわかりますが、ulの前でpタグは閉じて、外側に押し出されていますね。
そのせいでnext('ul')が動作していません。
pタグをdivタグに変えればひとまず動作するようになりますよ。
表示の配置に関しては、cssのposition指定を勉強してください。

投稿2017/08/07 06:07