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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

3回答

3600閲覧

階層のあるドロワーメニューの開閉。ひとつ開いたら、他を閉じたい

takagi01

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

0クリップ

投稿2017/01/26 12:02

###前提・実現したいこと
https://lab.sonicmoov.com/markup/jquery/hamburger-menu/
ここを参考に、jqueryを使用した階層のあるドロワーメニューを作成しております。

実装自体はできたのですが
どこかのメニューを開いた状態で、他のメニューをクリックすると
開いていたメニューが閉じるように変更したいです。
※開いている階層メニューが1つだけの状態

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

現在は、メニューを開くと再度クリックしないと閉じない状態です。
参考にしたDEMOがそういうものなので、当たり前なのですが・・・

モバイルですべての項目を開くと、画面外へいってしまうので
ひとつだけが開いた状態に変更したいです。

もしお分かりになる方がいらっしゃいましたら
お手数ですがご回答いただけると助かります。
よろしくお願いいたします。

###該当のソースコード

html

1<div class="btn_hamburger">MENU</div> 2 3 <section id="demo1" class="section_demo section_demo1"> 4 <ul class="section_demo_list"> 5 <li> 6 <h3 class="trigger"><a href="#">カテゴリー1</a></h3> 7 <div class="target"> 8 <ul> 9 <li><a href="#">リンク1</a></li> 10 <li><a href="#">リンク2</a></li> 11 <li><a href="#">リンク3</a></li> 12 </ul> 13 </div> 14 </li> 15 16 <li> 17 <h3 class="trigger"><a href="#">カテゴリー2</a></h3> 18 <div class="target"> 19 <ul> 20 <li><a href="#">リンク1</a></li> 21 <li><a href="#">リンク2</a></li> 22 <li><a href="#">リンク3</a></li> 23 </ul> 24 </div> 25 </li> 26 <li> 27 <h3 class="trigger"><a href="#">カテゴリー3</a></h3> 28 <div class="target"> 29 <ul> 30 <li><a href="#">リンク1</a></li> 31 <li><a href="#">リンク2</a></li> 32 <li><a href="#">リンク3</a></li> 33 </ul> 34 </div> 35 </li> 36 </ul> 37 </section>

javascript

1$(function() { 2 3 var activeClass = 'active'; 4 5 // ハンバーガーボタン 6 function hamburgBtn() { 7 $('.btn_hamburger').on('click', function(event) { 8 $button = $(this); 9 event.preventDefault(); 10 11 $button.find('a').toggleClass(activeClass); 12 $button.next().slideToggle(250); 13 }); 14 }; 15 16 function demo1_2(triggerSelector) { 17 // 引数で指定したトリガーをクリックしたとき、クリックしたトリガーの次の要素を展開 18 $(triggerSelector).on('click', function(event) { 19 $trigger = $(triggerSelector); 20 event.preventDefault(); 21 22 $(this).toggleClass(activeClass); 23 $(this).next().slideToggle(250); 24 }); 25 }; 26 // 実行 27 hamburgBtn(); 28 29 // 引数でトリガーを指定 30 demo1_2('#demo1 .trigger'); 31});

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

質問文の題名をみたときに私が想像した動作はこのようなものですが、どうなのでしょうか?

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 </style> 13</head> 14<body> 15<div class="btn_hamburger">MENU</div> 16 17<section id="demo1" class="section_demo section_demo1"> 18 <ul class="section_demo_list"> 19 <li> 20 <h3 class="trigger"><a href="#">カテゴリー1</a></h3> 21 <div class="target"> 22 <ul> 23 <li><a href="#">リンク1</a></li> 24 <li><a href="#">リンク2</a></li> 25 <li><a href="#">リンク3</a></li> 26 </ul> 27 </div> 28 </li> 29 30 <li> 31 <h3 class="trigger"><a href="#">カテゴリー2</a></h3> 32 <div class="target"> 33 <ul> 34 <li><a href="#">リンク1</a></li> 35 <li><a href="#">リンク2</a></li> 36 <li><a href="#">リンク3</a></li> 37 </ul> 38 </div> 39 </li> 40 <li> 41 <h3 class="trigger"><a href="#">カテゴリー3</a></h3> 42 <div class="target"> 43 <ul> 44 <li><a href="#">リンク1</a></li> 45 <li><a href="#">リンク2</a></li> 46 <li><a href="#">リンク3</a></li> 47 </ul> 48 </div> 49 </li> 50 </ul> 51</section> 52<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> 53<script> 54 $(function () { 55 var activeClass = 'active'; 56 57 // ハンバーガーボタン 58 function hamburgBtn() { 59 $('.btn_hamburger').on('click', function (event) { 60 $button = $(this); 61 event.preventDefault(); 62 63 $button.find('a').toggleClass(activeClass); 64 $button.next().slideToggle(250); 65 }); 66 } 67 68 $("#demo1 .trigger").on("click", function (event) { 69 event.preventDefault(); 70 $(this).toggleClass(activeClass); 71 $(this).next().slideToggle(250); 72 $(this).parent().siblings().children().next().slideUp(); 73 }); 74 // 実行 75 hamburgBtn(); 76 77 $("#demo1 .trigger").next().slideToggle(); 78 }); 79</script> 80</body> 81</html>

投稿2017/01/26 13:14

編集2017/01/27 12:07
s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takagi01

2017/01/27 06:14

ご回答ありがとうございます! 基本的にはお書きいただいたソースコードで、理想に近い動きになりました。 違う点として ・ページを開いた時は全てのメニューが閉じた状態 (いただいたソースだと一番上のメニューだけ開いた状態) また、なぜか実際のページに実装すると ページを開いた際に、一番上のメニュー以外が全部開いた状態になってしまいました (いただいたソースだけのページと逆の状態) ソースコードをヒントに、色々と変更などをして試してみたのですが上手くいかず。 引き続き、調査しながら試してみます。
s8_chu

2017/01/27 12:10

ページを開いた時は全てのメニューが閉じた状態にするのですね。質問文を読み違えていました。修正させて頂きました。 実際のページでは全部開いた状態になってしまうということは、実際のページに全部開いた状態にさせるような記述をしているということになります。もう一度質問者さんの手元にあるコードを見直してみてください。
takagi01

2017/01/27 13:54

引き続き、ご回答とソースコードの修正ありがとうございます! いただいたソースでほぼ理想通りなのですが ページを開いた際は「MENU」ボタンのみが表示されている状態にしたいです。 説明不足で申し訳ございません。 メニューが全て開いてしまう現象も、色々と調べてみると メニューを開いた際に <div class="target">に style="display: block;" が付くのが原因のようなのですが もしかすると、ボタン以外の項目が表示されている事と関係しておりますでしょうか? 再度色々と試してみましたが、どうしても解決できず。 心当たりがございましたら、ご教授願えるとありがたいです。
s8_chu

2017/01/31 12:05

返信遅れてしまい申し訳ありませんでした。修正させていただきました。 今のところは、すべてのメニューが開いてしまうのは、質問者さんのjavascriptのコードのどこかでメニューを開く状態にする記述をしているから、というところまでしか私には推測できません。 もし、どうしても解決しないようならば、問題の詳細を記述したうえで新しく質問すると解決策が見つかるかもしれません。
guest

0

例示のHTMLですとこんな感じですかねぇ

javascript

1$(function(){ 2 $('#demo1 li li').hide(); 3 $('#demo1 a').on('click',function(e){ 4 $(this).parents('h3').siblings('div').find('li').toggle(); 5 $(this).parents('li').siblings('li').find('li').hide(); 6 }); 7}); 8

投稿2017/01/26 12:35

yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takagi01

2017/01/26 13:12

ご回答ありがとうございます! いただいたスクリプトを追記したところ 一度メニューを開いた後、他メニューを押して強制的に閉じられたメニューの挙動が 再度クリックすると、一瞬だけ開いて閉じるような感じなります。 DEMOのモバイル表示時に https://lab.sonicmoov.com/wp-content/uploads/demo/marizo/201611_jquery_accordion/ 開いたメニューの右端にある↓が×に変化するのですが 強制で閉じた際に、×のままになっています。 開いた設定(付加されたクラス.active?)が完全に消えていない? この辺が関係していそうなので、こちらでも調べてみますが もしお分かりになりましたらよろしくお願いいたします。
guest

0

人によって書き方は様々なので、自分の書き方が正答とは思えませんが、
例文ではtoggleを使って開閉を行っているため、現状が開か閉かを判断出来ていないと思います。

またサンプルサイトをモバイル表示した際に、他のメニューを開いても既に開いていたメニューが強制的に閉じる動作が見受けられません。

「親の要素が閉じられた際には子要素が展開していた場合閉じてほしい。」という事であれば、
フラグを用意して親要素が開状態か閉状態かを値として持ち、閉になった際には下層で展開した要素を閉じる処理を入れれば良いと思います。

上記をそのままスクリプト化すればokだと思うのですが。

var 親要素のフラグ = false;

親要素.click{
if(親要素のフラグ == false){
親要素のフラグ = true;
自身を開閉;
}
else{
子要素のdisplayをnone;
親要素のフラグ = false;
自身を開閉;
}
}

みたいなイメージ?

投稿2017/02/21 14:41

shaak

総合スコア607

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問