data属性を利用したモーダルメニューを作りたい。

現在は、これまで作成してきたクラスを用いたメニューとは異なる
data属性を用いたメニューを作成しているのですが、何も変化が
見られなくて困っています。申し訳ないのですがどなたか知恵を
お貸しいただければ幸いです。

HTML5
1コード <body>
2  <div class="nav-menu" data-open="false">
3    <nav class="inner">
4      <ul class="nav-menu-list">
5      <li class="list-item">
6        <a href="about.html" target class="barba-link"></a>
7      </li>
8    </ul>
9    </nav>
10  </div>
11  <header class="header">
12    <div class="header-menu">
13      <button class="header-menu-btn">
14        <span class="menu-text">MENU</span>
15      </button>
16    </div>
17  </header>
18
19
20  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
21  <script src="js/script.js"></script>
22</body>

CSS3
1コード  .header-menu-btn {
2    position: relative;
3    width: 47px;
4    height: 42px;
5    display: block;
6    &:before,&:after {
7        content: "";
8        width: 85%;
9        height: 4px;
10        background: #000;
11        position: absolute;
12        left: 50%;
13        transform: translate(-50%,0);
14    }
15    &:before {
16        top: 5px;
17    }
18    &:after {
19        top: 20px;
20    }
21}
22
23.menu-text {
24    font-family: fantasy;
25    letter-spacing: 1;
26    display: block;
27    line-height: 1;
28    position: absolute;
29    top: 30px;
30    left: 10%;
31}
32
33.nav-menu[data-open="false"] {
34    position: absolute;
35    top: 0;
36    left: 0;
37    width: 100%;
38    height: 100%;
39    overflow: hidden;
40    pointer-events: none;
41    opacity: 0;
42    transition: opacity .2s ease-out;
43}
44
45.nav-menu[data-open="true"] {
46    display: block;
47    opacity: 1;
48    background: #000;
49    position: absolute;
50    left: 0;
51    top: 0;
52    width: 100%;
53    height: 100%;
54}
55
56.list-item {
57    list-style-type: none;
58}
59
60.nav-menu-list {
61    max-height: none;
62    width: 100%;
63}
64
65.inner {
66    width: 100%;
67    display: block;
68}

javascript
1コード  $(function(){
2    $(".header-menu").click(function(){
3        $("body").removeAttr("data-open","false"),
4        $("body").attr("data-open","true")
5    return false;
6    }); 
7    });

目標としては、アイコンがクリックされると非表示が解除され、
trueの内容が表示されるといったイメージです。

m.ts10806

2020/03/24 04:51

初期値をtrue/false切り替えた場合、想定の動作はしているのでしょうか？ …ただ、不確かで申し訳ないですがdata属性は値ですら非同期的な動作をしてたと記憶にあり、CSSの切り替えのようなことに使うのはあまり適してないように思います。 (不確かなので後程検証はしてみます)

m.ts10806

2020/03/24 05:08

上記、勘違いでした。簡易コードで試しただけですが、attrで変化したstyleは効きますね。ブラウザ開発ツールの検証で属性が想定通り変化しているか確認してみてください。

dream

2020/03/24 11:21

わかりました、やってみます！

dream

2020/03/24 23:55

無事イメージ通りの動きになってくれました。多忙なところお付き合いいただきありがとうございました。

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

回答2件

雑ですがこんな感じですかね？

投稿2020/03/24 11:21

yambejp

総合スコア116835

yambejp

2020/03/24 11:21

dream

2020/03/25 00:42

ご多忙のところの回答恐れ入ります。一つ気になった点を申し上げますと、 'click'の後のe=>はどのようなことを意味しているのでしょうか？

yambejp

2020/03/25 00:56

eはイベントを渡すための引数で、click処理情報を引き継ぎます。 e.targetを利用するのが目的でこの場合のe.targetはクリックされた#hoge自体をさします

dream

2020/03/25 02:34

なるほど、そういった意味なんですね。詳しい説明ありがとうございます。とても為になりました。

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

ベストアンサー

JavaScript側を、以下のように書き換えたら動きそうです。
(true / falseなので、「!」を使うなどもっとスマートな方法はあるかもしれませんが)

JavaScript
1$(function() {
2  $(".header-menu").click(function() {
3    if ($(".nav-menu").attr("data-open") == "true") {
4      $(".nav-menu").attr("data-open", "false");
5    }
6    else {
7      $(".nav-menu").attr("data-open", "true");
8    }
9    
10    return false;
11  }); 
12});

CSSを見ると、.nav-menu[data-open="false"]など.nav-menuに対しての記述はあるものの、
JavaScript側では$("body").removeAttr("data-open","false"),などbodyに対して操作をしようとしているようでした。
そのためJavaScript側で、$(".nav-menu")に対して記述を追加するようにしました。

投稿2020/03/24 05:20