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

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

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

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

Q&A

2回答

1581閲覧

リンク先でメニューを開けたままにするには

clovers

総合スコア10

JavaScript

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

0グッド

2クリップ

投稿2018/10/05 09:04

前提・実現したいこと

すみません。

当方初心者です。教えて頂きたいのですが、
以下のアコーディオンメニューを、リンクをクリックした時に、
クリックしたグループのものだけ開いている(メニューが開いている)状態にしたいです。
(例、menu1-1をクリック後、category1のメニューはリンク先で開いたまま。他のcategoryは閉じている状態。)

該当のソースコード

HTML

1<ul> 2<li> 3<div class="category">category1</div> 4<ul class="fxmn"> 5<li><a href="11">menu 1-1</a></li> 6<li><a href="12">menu 1-2</a></li> 7<li><a href="13">menu 1-3</a></li> 8</ul> 9</li> 10<li> 11<div class="category">category2</div> 12<ul class="fxmn"> 13<li><a href="21">menu 2-1</a></li> 14<li><a href="22">menu 2-2</a></li> 15<li><a href="23">menu 2-3</a></li> 16<li><a href="24">menu 2-4</a></li> 17</ul> 18</li> 19<li> 20<div class="category">category3</div> 21<ul class="fxmn"> 22<li><a href="31">menu 3-1</a></li> 23<li><a href="32">menu 3-2</a></li> 24<li><a href="33">menu 3-3</a></li> 25<li><a href="34">menu 3-4</a></li> 26<li><a href="35">menu 3-5</a></li> 27</ul> 28</li> 29</ul>

Javascript

1$(function(){ 2 $("ul.fxmn").hide(); 3 $("div.category").click(function(){ 4 $("ul.fxmn").slideUp(); 5 if($("+ul",this).css("display")=="none"){ 6 $("+ul",this).slideDown(); 7 } 8 }); 9 });

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

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

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

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

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

x_x

2018/10/05 09:11

提示されたコードではmenu1-1のクリックでどこかが閉じることはなかったのですが、どの部分の動きのことを言っていますか?
clovers

2018/10/09 01:15

サイドにメニューを設置して、リンククリック後にサイドメニューの該当部分が開いている状態にしたいです。説明不足ですみませんでした。
guest

回答2

0

簡単な方法として下記のような方法でも実現可能です。

  1. リンク先でURLに特定のパラメータを付与する。

例:http://www.hoge.com?menu=1

  1. URLのパラメータを取得し、条件判定して状況に応じて該当のメニューにクラスを付与してオープン状態にしておく

lang=javascript

1var param = getParam('menu'); // 「1」 を出力 2if (param === 1) { 3 menu.classList.add('is-menuOpen'); 4}

投稿2018/10/05 10:55

編集2018/10/05 11:01
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

clovers

2018/10/09 01:28 編集

回答ありがとうございます。 1の「URLに特定のパラメータを付与する。」はできましたが、 2の「条件判定して状況に応じて該当のメニューにクラスを付与してオープン状態にしておく」 のもう少し詳細が知りたいです。 パラメータ1を付与した場合、1のメニューのみ開いている パラメータ2を付与した場合、2のメニューのみ開いている … 上記のようにしたい場合、他にどのような記述が必要でしょうか。 お手数をおかけしますが、よろしくお願いいたします。
退会済みユーザー

退会済みユーザー

2018/10/10 12:55

パラメーターを付与してそのパラメータを取得することはできましたか??? あとどの程度の規模のメニューですか???
clovers

2018/10/11 00:17 編集

メニューの規模は、 カテゴリー1(リンクメニュー数:3)、カテゴリー2(リンクメニュー数:18) カテゴリー3(リンクメニュー数:6)、カテゴリー4(リンクメニュー数:3) カテゴリー5(リンクメニュー数:5)、カテゴリー6(リンクメニュー数:3) カテゴリー7(リンクメニュー数:2)、カテゴリー8(リンクメニュー数:18)です。 カテゴリー毎にパラメータの数を変えて、付与しました。 URLで「?menu=1」~「?menu=8」が表示されているのは確認できましたが、 パラメータの取得は、まだ確認できていないです。 追加の情報等必要であればまたお知らせください。よろしくお願いいたします。
guest

0

ページを遷移させた上で相手を開くのであればハッシュか何かで印をつけておいて
相手側のほうでハッシュに該当するfxmnを開くような処理を入れることでしょう

投稿2018/10/05 10:48

yambejp

総合スコア114572

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問