質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

navbar ハンバーガーからばつ印へ

Iori
Iori

総合スコア54

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

2回答

0グッド

0クリップ

442閲覧

投稿2022/10/07 11:59

編集2022/10/08 07:21

前提

こちらの記事を真似しています。https://konpure.com/2019/04/28/post-10826/

実現したいこと

navbarの三本線をクリックしたらバツに変更させたいです。

発生している問題・エラーメッセージ

①クリックしてもopenクラスが発生しません。
②.navbar-togglerのborder: 10px solid #444が反映されません。

イメージ説明

記事では親要素がdivで私のはbuttonなのが原因なのでしょうか?

該当のソースコード

html

1 <nav class="navbar navbar-dark navbar-expand-lg fixed-top bg-gradient"> 2 <div class="container-fluid"> 3 <a class="navbar-brand" href="">yoriss67</a> 4 5 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" 6 data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" 7 aria-label="Toggle navigation"> 8 <span class="navbar-toggler-icon bar1 open1"></span> 9 <span class="navbar-toggler-icon bar2 open2"></span> 10 <span class="navbar-toggler-icon bar3 open3"></span> 11 12 </button> 13 14 <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> 15 16 <ul class="nav navbar-nav ms-auto flex-row "> 17 <li class="nav-item pl-3"> 18 19 20 <a class="fa-brands fa-2x fa-github" href="https://github.com/yoriss67" target="_blank"></a> 21 22 23 <!-- <a class="nav-link" href="">Contact</a> --> 24 </li> 25 <li class="nav-item pl-3"> 26 27 <a class="fa-brands fa-2x fa-twitter" href="https://twitter.com/iori73wsy" target="_blank"></a> 28 29 <!-- <a class="nav-link" href="">Pricing</a> --> 30 </li> 31 <li class="nav-item pl-3"> 32 <a class="fa-brands fa-2x fa-instagram" href="https://www.instagram.com/ioriiii_13/" target="_blank"></a> 33 34 <!-- <a class="nav-link" href="">Download</a> --> 35 </li> 36 37 38 <li class="nav-item pl-3"><a href="#aboutme">About me</a></li> 39 40 <li class="nav-item pl-3"><a href="#works">Works</a></li> 41 42 <li class="nav-item pl-3"><a href="#skill">Skills&Tools</a> </li> 43 44 <li class="nav-item pl-3"><a href="#contact"> Contact</a></li> 45 46 47 </ul> 48 </div> 49 50 </div> 51 </nav> 52 53

css

1/* hamburger */ 2 3 .navbar-toggler { 4 position: relative; 5 width: 50px; 6 height: 50px; 7 border: 10px solid #444; 8 box-sizing: border-box; 9} 10 11.navbar-toggler-icon { 12 display: block; 13 width: 30px; 14 height: 5px; 15 background: #444; 16 position: absolute; 17 left: 10px; 18 transition: all 0.5s ease; 19} 20 21.bar1 { 22 top: 6.25px; 23 background-color: blue; 24 } 25 .bar2 { 26 top: 17.5px; 27 top: 20px; 28 background-color: yellow; 29 } 30 .bar3 { 31 bottom: 6.25px; 32 /* bottom: 20px; */ 33 background-color: red; 34 } 35/* 36 ハンバーガーメニューがクリックされたら 37 上の線を真ん中に移動させて45℃回転 38*/ 39 40.bar1 .open { 41 top: 20px; 42 transform: rotate(45deg); 43} 44 45.bar2 .open { 46 opacity: 0; 47} 48 49.bar3 .open { 50 top: 20px; 51 transform: rotate(-45deg); 52} 53 54

JavaScript

1// hamburger 2 3$(function() { 4 $('button').click(function() { 5 $('.bar1, .bar2, .bar3').toggleClass('.open1, .open2, .open3'); 6 }) 7}); 8

試したこと

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

解決しました!

html

1 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" 2 data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" 3 aria-label="Toggle navigation"> 4 <span class="navbar-toggler-icon bar1 open"></span> 5 <span class="navbar-toggler-icon bar2 open"></span> 6 <span class="navbar-toggler-icon bar3 open"></span> 7 8 </button>

css

1/* hamburger */ 2 3.navbar-dark .navbar-toggler { 4 /* border-color: rgb(0, 0, 0); */ 5} 6 7 8 9 .navbar-dark .navbar-toggler { 10 position: relative; 11 width: 50px; 12 height: 50px; 13 border: 5px solid #444; 14 box-sizing: border-box; 15} 16 17.navbar-toggler-icon { 18 display: block; 19 width: 30px; 20 height: 5px; 21 background: #444; 22 position: absolute; 23 left: 10px; 24 transition: all 0.5s ease; 25} 26 27.bar1 { 28 top: 6.25px; 29 background-color: blue; 30 } 31 .bar2 { 32 top: 17.5px; 33 top: 20px; 34 background-color: yellow; 35 } 36 .bar3 { 37 bottom: 6.25px; 38 /* bottom: 20px; */ 39 background-color: red; 40 } 41 42/* 43 ハンバーガーメニューがクリックされたら 44 上の線を真ん中に移動させて45℃回転 45*/ 46 47.bar1.open { 48 top: 20px; 49 transform: rotate(45deg); 50} 51 52.bar2.open { 53 opacity: 0; 54} 55 56.bar3.open { 57 top: 20px; 58 transform: rotate(-45deg); 59}

js

1// hamburger 2 3$(function() { 4 $('.navbar-toggler').click(function() { 5 $('.bar1, .bar2, .bar3').toggleClass('open'); 6 }) 7});

ご指摘の通りクラスをopen にしてCSSを.bar数字.openでスペースなしで詰めました!

borderに関しては下にあった

css

1.navbar-dark .navbar-toggler

が邪魔していたのだと思います。

お答えいただいた皆さんありがとうございました!

今開いてみると...

数時間前には正常に機能していたのですが、今確認してみると逆になっていました。クリック前がばつ印でクリック後が三本線になります。コードは解決したときと同じです。また時間が経てば戻るでしょうか?

css

1/* hamburger */ 2 3.navbar-dark .navbar-toggler { 4 /* border-color: rgb(0, 0, 0); */ 5} 6 7 8 9 .navbar-dark .navbar-toggler { 10 position: relative; 11 width: 50px; 12 height: 50px; 13 /* border: 5px solid #444; */ 14 box-sizing: border-box; 15} 16 17.navbar-toggler-icon { 18 display: block; 19 width: 30px; 20 height: 3px; 21 background: #444; 22 position: absolute; 23 left: 10px; 24 transition: all 0.5s ease; 25} 26 27.bar1 { 28 /* top: 6.25px; */ 29 top: 8px; 30 background-color:#000; 31 } 32 .bar2 { 33 top: 17.5px; 34 top: 20px; 35 background-color:#000; 36 } 37 .bar3 { 38 /* bottom: 6.25px; */ 39 bottom: 12px; 40 /* bottom: 20px; */ 41 background-color:#000; 42 } 43 44/* 45 ハンバーガーメニューがクリックされたら 46 上の線を真ん中に移動させて45℃回転 47*/ 48 49.bar1.open { 50 top: 20px; 51 transform: rotate(45deg); 52} 53 54.bar2.open { 55 opacity: 0; 56} 57 58.bar3.open { 59 top: 20px; 60 transform: rotate(-45deg); 61}

JavaScript

1$(function() { 2 $('.navbar-toggler').click(function() { 3 $('.bar1, .bar2, .bar3').toggleClass('open'); 4 }) 5}); 6

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

2022/10/09 22:58

こちらの質問が他のユーザーから「問題・課題が含まれていない質問」という指摘を受けました。

回答2

2

ベストアンサー

①クリックしてもopenクラスが発生しません。

下記の修正で動作するでしょう。

CSS

1/* .bar1 .open { 下記に修正 */ 2.bar1.open { 3 top: 20px; 4 transform: rotate(45deg); 5} 6/* .bar2 .open { 下記に修正 */ 7.bar2.open { 8 opacity: 0; 9} 10/* .bar3 .open { 下記に修正 */ 11.bar3.open { 12 top: 20px; 13 transform: rotate(-45deg); 14}

JavaScript/jQuery

1$(function() { 2 $('button').click(function() { 3 $('.bar1, .bar2, .bar3').toggleClass('open'); 4 }) 5});

②.navbar-togglerのborder: 10px solid #444が反映されません。

提示のコードだとそれは反映しています。提示されていない部分に原因があるのでは。
ただ、高さと幅の設定は小さいので、ハンバーガーの三本線がはみ出ています。
質問の画像とは違うので、これは提示されていない部分に原因があるのでしょう。
提示されていない部分のことは回答できません。

投稿2022/10/08 00:19

編集2022/10/08 02:06
hatena19

総合スコア32031

m.ts10806, Iori👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

2022/10/09 22:59

こちらの回答が他のユーザーから「情報が古くなった回答」という指摘を受けました。

1

①クリックしてもopenクラスが発生しません

open1、open2、open3というクラスはCSSに定義されてないので、クラスをトグルしたとしても何も起きないと思います。
.barX .openのようにCSS定義されているのでそれぞれのopenをトグルすべきでは。
あと.toggleClass()の引数は「クラス名」なのでセレクタ.classnameの形式で書いてしまうと.classnameというクラスが付きます(簡易動作確認済み)。
https://api.jquery.com/toggleclass/

あとhatena19さんの回答の通り
.barX .openだと「.barX 配下の.open」になるので、.openが動作する位置に指定できてないということになります。
並列指定とするなら.barX.open

②.navbar-togglerのborder: 10px solid #444が反映されません。

手元で提示コードで確認しましたが、反映されていました。
↓画面キャプチャ
イメージ説明

他のCSSが影響しているのではと。

投稿2022/10/08 00:13

編集2022/10/09 23:01
m.ts10806

総合スコア80038

Iori👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

2022/10/09 23:03

こちらの回答が他のユーザーから「質問に対する回答となっていない投稿」という指摘を受けました。

回答へのコメント

m.ts10806

2022/10/09 23:06

どこがどう情報が古くなったのかコメントもらえませんかね。 私も最新の情報はぜひとも勉強させていただきたい。 jQueryは質問者が使っているもので、別に古くない、今でも普通に使われているライブラリですが、 jQueryをやめようという流れがあることだけで「古い」と言い切るには さぞそれだけの根拠をお持ちと見受けられます。 もちろん嫌がらせ目的なんかではないですよね? もう1つの回答にも同じ修正依頼をするほどですから。 余程の自信があるのでしょう。 ぜひとも回答して教えてくださいな。 嫌がらせじゃないなら。とりあえず嫌がらせにしか思えないのと同一人物の行為なのは明らかなので通報はしてますが。
m.ts10806

2022/10/09 23:09

修正依頼内容を変更したところでどう回答になってないのか指摘がないとその修正依頼・指摘は成り立ちません。 以前の無言低評価と同じ不当な使い方をしているだけのこと。 嫌がらせ目的なのは明らかなので、この修正依頼をしている人が 既存回答以上の回答をできるとは到底思えません。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。