ドロワーメニューの下線をうまい具合に消したい。

前提・実現したいこと

ドロワーメニューを作成しています。

メニューに下線を引いているんですが、クリック時に開くサブメニューにまで影響が出ています。

実現したい事として、メニューの通常時は下線があるが、クリックをするとメニューの下線を消えるようにしたい。

現状では、メニューの下線とサブメニューの背景色が重なっている状態です。
それでは、見た目が悪いため、メニューには下線。サブメニューは背景色だけのような感じにしたいです。

解決方法が分かる方、教えて頂きたいです。

該当のソースコード

html
1<!doctype html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
6  <script>
7    $(function() {
8      $('.js-menu__item__link').each(function() {
9        $(this).on('click', function() {
10          $(this).toggleClass('on');
11          $("+.submenu", this).slideToggle()
12          return false;
13        });
14      });
15    });
16
17  </script>
18</head>
19
20<body>
21
22  <main>
23    <ul class="menu">
24      <li class="menu__item">
25        <a class="menu__item__link js-menu__item__link" style="border-bottom: solid 2px blue;">メニュー1（クリックで開く）</a>
26        <ul class="submenu">
27        <!-- このaqua色にメニューのblueが重なっているため、blueを消したい -->
28          <div class="submenu__item" style="background-color:aqua;">
29            <a>サブメニュー1</a>
30          </div>
31          <div class="submenu__item" style="height: 100px;">
32            <a>サブメニュー2</a>
33          </div>
34          <div class="submenu__item" style="height: 100px;">
35            <a>サブメニュー3</a>
36          </div>
37          <div class="submenu__item">
38            <a>サブメニュー4</a>
39          </div>
40        </ul>
41      </li>
42      <li class="menu__item">
43        <a class="menu__item__link js-menu__item__link" style="border-bottom: solid 2px orange;">メニュー2（クリックで開く）</a>
44        <ul class="submenu">
45          <div class="submenu__item" style="height: 100px;">
46            <a>サブメニュー1</a>
47          </div>
48          <div class="submenu__item" style="height: 100px;">
49            <a>サブメニュー2</a>
50          </div>
51          <div class="submenu__item" style="height: 100px;">
52            <a>サブメニュー3</a>
53          </div>
54          <div class="submenu__item">
55            <a>サブメニュー4</a>
56          </div>
57        </ul>
58      </li>
59      <li class="menu__item">
60        <a class="menu__item__link js-menu__item__link" style="border-bottom: solid 2px orange;">メニュー3（クリックで開く）</a>
61        <ul class="submenu">
62          <div class="submenu__item" style="height: 100px;">
63            <a>サブメニュー1</a>
64          </div>
65          <div class="submenu__item" style="height: 100px;">
66            <a>サブメニュー2</a>
67          </div>
68          <div class="submenu__item" style="height: 100px;">
69            <a>サブメニュー3</a>
70          </div>
71          <div class="submenu__item">
72            <a>サブメニュー4</a>
73          </div>
74        </ul>
75      </li>
76    </ul>
77  </main>
78</body>
79
80</html>
81

行動規範の内容に同意します

回答1件

ベストアンサー

メニューのリンクをクリックしたときに、自身のborder-bottom-styleを調べて、"solid"と"none"でトグルさせる。
サブメニューは最初は隠しておく。

Javascript
1            $(function () {
2                $('.js-menu__item__link').each(function () {
3                    $(this).on('click', function () {
4                        $(this).toggleClass('on');
5                        $("+.submenu", this).slideToggle()
6                        // 1. border-bottom-styleのトグル処理
7                        $(this).css("border-bottom-style", ($(this).css(
8                            "border-bottom-style") == "none") ? "solid" : "none");
9
10                        return false;
11                    });
12                    // 2. サブメニューの初期処理
13                    $("+.submenu", this).hide()
14
15                });
16            });
17

HTMLのul要素の子要素には(基本的に)li要素しか書けないので、submenuクラスのul要素の子要素として書かれたすべてのdiv要素をli要素に変更する。たとえば、

HTML
1                    <ul class="submenu">
2                        <li class="submenu__item" style="background-color:aqua;">
3                            <a>サブメニュー1</a>
4                        </li>
5                        <li class="submenu__item" style="height: 100px;">
6                            <a>サブメニュー2</a>
7                        </li>
8                        <li class="submenu__item" style="height: 100px;">
9                            <a>サブメニュー3</a>
10                        </li>
11                        <li class="submenu__item">
12                            <a>サブメニュー4</a>
13                        </li>
14                    </ul>
15

この規模のCSSなら、外部ファイルに独立させた方が見通しがいい。

投稿2020/09/05 01:19

Daregada

総合スコア11990

okkeeeee

2020/09/05 07:47

ありがとうございます。解決しました。 HTMLのul要素の子要素には(基本的に)li要素しか書けないので >>自分からしたら「divでも想定通り動くしなあ。。」とか思ってしまうんですが。書けないとは、そのようなルール(?)があるのでしょうか？仮に、仕事で書いたらどうなりますか？

Daregada

2020/09/05 10:16 編集

HTML5はW3C規格として標準化されていますから、「規格を守らないで記述している」ことになり、ブラウザーがどのような表示を行なうかはブラウザーの勝手で、作成側では想定できないことになります。たとえば、「エラーメッセージを表示してWebページを表示しない」ブラウザーが存在しても文句は言えません。「想定通り動く」のは、現在のメジャーなブラウザーが「間違って書かれたHTMLでもそれなりに表示する」方針だからに過ぎません。

行動規範の内容に同意します