0

以下の内容で表示を押すとメニューの以下の内容を表示非表示するものを作ってみていますが、画面が一瞬ちらついて映るだけで原因を教えていただけないでしょうか?

<div class="menuContents">
  <ul class="menuList">
    <li>a</li>
    <li>b</li>
    <li>c</li>
  </ul>
</div>

またJavascript内の変数のlet flg = 0;が毎回0に戻ってしまいます。
以上2点のご教授お願い致します。
***javascriptの変数の件解決いたしました***
<a href="javascript:void(0)" class="menubtn">表示</a>
とすることでlet flgの値が変更できるようになりました!
ただし表示の後非表示になりませんでした。

ソースを以下に示します。
CSSに関しては.menuContentsと.menuContentsProjectだけでよさそうですがすべて一応載せておきます。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/style.css">
  <title>JavaScript DOM</title>
</head>
<body>
  <div class="container">
    <div class="menu">
      メニュー[ <a href="" class="menubtn" >表示</a>]
      <div class="menuContents">
        <ul class="menuList">
          <li>a</li>
          <li>b</li>
          <li>c</li>
        </ul>
      </div>
    </div>
  </div>
  <script src="js/main.js"></script>
</body>
</html>

CSS

.container{
  background: skyblue;
  width: 120px;
  height: auto;
  /* transition-property: width,height;
  transition-duration: 2s; */
  
}
.menu{
  text-align: center;
}
.menuContents{
  display: none;
}
.menuContentsProject{
  display: block;
}
.menuList{
  padding:0 0 0 10px;
  margin:0;
}
.menuList li{
  background-color: springgreen;
  list-style-type: none;
  text-align: left;
}

javascript

'use strict';

{
    
  const menubtn = document.querySelector('.menubtn');
  let flg = 0;
  menubtn.addEventListener('click', function () {
    flg = flg == 0 ? 1 : 0;
    var menuContents = document.querySelector('.menuContents');
    if (flg == 0)
      menuContents.className = 'menuContents'
    else if(flg == 1)
      menuContents.className = 'menuContentsProject'
  });
}

1 件の回答 1

0

クリック時のイベントで menuContents のクラス名を変更しているので、一回クリックした後は、クリック時のイベント内では document.querySelector('.menuContents'); では要素を取得できません。

読み込み時に menuContents を取得しておけばいいでしょう。

'use strict';

{    
  const menubtn = document.querySelector('.menubtn');
  const menuContents = document.querySelector('.menuContents');
  let flg = 0;
  menubtn.addEventListener('click', function () {
    flg = flg == 0 ? 1 : 0;
    if (flg == 0)
      menuContents.className = 'menuContents'
    else if(flg == 1)
      menuContents.className = 'menuContentsProject'
  });
}

ちなみに、クラス名を書き換えるのではなく、クラス名(例えば open)を追加する仕様にすれば、classList.toggle() を使ってシンプルに記述できます。

'use strict';

{    
  const menubtn = document.querySelector('.menubtn');
  const menuContents = document.querySelector('.menuContents');
  menubtn.addEventListener('click', function () {
    menuContents.classList.toggle("open")
  });
}
.menuContents {
  display: none;
}
.menuContents.open{
  display: block;
}
1
  • hatena様> 読み込み時のタイミングがおかしかったのですね。ありがとうございます!また、toggleを使った方法の方がよさそうでしたのでこちらも参考にさせていただきます!
    – ppp
    Commented 2020年11月28日 5:34

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。