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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

JavaScript

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

873閲覧

アコーディオンが閉じなくなるのを回避したい

KOO_

総合スコア58

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

JavaScript

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2019/02/06 01:25

現在、ドロップダウンを利用してサイドナビを作っています。

無事装着は完了したのですが、一度クリックしてページ推移するとドロップダウンが動かなくなる現象が発生しております。以下でどこか間違っている部分があるのでしょうか?

<ul id="accordion" class="accordion"> <li><!--開始--> <div class="cds-navi-title"></div> <div class="link"> <i class="fa fa-paint-brush"></i> <i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li><%= link_to "", "/carriers/new" %></li> <li><a href="#"></a></li> </ul> </li><!--終了--> </ul>
ul { list-style-type: none; } .accordion { list-style-type: none; padding: 0; height: 100vh; background-color:#0365C0; width: 180px; text-align:center; margin-top:-12px; float:left; position:fixed; z-index:7; .link { cursor: pointer; color: white; position: relative; padding: 10px 10px 10px; width: 180px; display: block; background-color: #0365C0; color: #ffffff; text-decoration: none; border-bottom: 1px solid #ffffff; } li:last-child .link { border-bottom: 0; } a, a:visited { color : #fff; } } .accordion li i { position: absolute; top: 16px; left: 12px; font-size: 18px; color: #00A2FF; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .accordion li i.fa-chevron-down { right: 12px; left: auto; font-size: 16px; } .accordion li.open .link { color: white; } .accordion li.open i.fa-chevron-down { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .accordion li.default .submenu {display: block;} /** * Submenu -----------------------------*/ .submenu { display: none; background: #00A2FF; font-size: 14px; } .submenu li { border-bottom: 1px solid white; } .submenu a { display: block; text-decoration: none; color: white; padding: 12px; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .submenu a:hover { background-color: #ffccff; color: #ff0000; text-decoration: underline; } .cds-navi-title { padding: 0.5em 1.0em; margin-top:15px; margin-bottom:10px; display:inline-block; font-weight: bold; font-size:14px; color: #004D7F;/*文字色*/ background: #fff; border-radius: 25px;/*角の丸み*/ }
Accordion.prototype.dropdown = function(e) { var $el = e.data.el; $this = $(this), $next = $this.next(); $next.slideToggle(); $this.parent().toggleClass('open'); if (!e.data.multiple) { $el.find('.submenu').not($next).slideUp().parent().removeClass('open'); }; } var accordion = new Accordion($('#accordion'), false); });

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

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

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

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

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

m.ts10806

2019/02/06 04:22

.accordion { の定義からするとSCSSですかね・・
KOO_

2019/02/06 04:43

そうです。cssに問題があるのでしょうか?
m.ts10806

2019/02/06 04:45

いえ、そういうわけではありません。現在のタグで見に来る人が全てscssをコンパイルできる環境にあるわけではないので、そこは補足なりタグに追加なりしてもらいたいなと(ちなみに私は手持ちにはコンパイル環境ありません)。 回答を得る機会を失してしまいます。
guest

回答1

0

情報が全く足りないからヤマカンでしか答えられないけど

一度クリックしてページ推移するとドロップダウンが動かなくなる

ページ遷移(せんい)してるからじゃない?

ブラウザはリンクをクリックしたりして、別のURLへ移動すると現在のページの情報を全て捨てて、
新しいHTMLファイルを取得してきてJavaScriptの変数領域等を全て構築し直しになるよ。

だからヘッダーなんかのWebサイト全体の共通部品に、
メニューがシュッと出てくるようなJavaScriptのし掛けを作ったら全てのページで同じJavaScriptを実行させる必要があるよ。

それやってないんじゃないかな?

投稿2019/02/06 04:46

miyabi-sun

総合スコア21158

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問