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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

537閲覧

jQueryでslideDownさせ全画面表示する(ページ内切り替え)

tkmvictim

総合スコア2

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/06/01 20:37

前提・実現したいこと

Airbnb(https://www.airbnb.jp/host/homes)で1128px以下の時に表示されるヘッダーアイコンをクリックした際のスライドダウンを使った全画面表示でのページ内切り替え

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

display:noneとしているモーダルをクリック
イベントでslideDownを用いて全画面表示をしようとしているのですが、モーダルのslideDownはおろか表示すらされません。

該当のソースコード

アイコンをクリックすると以下のモーダルが全画面表示でslideDownするようにしようとしています。
以下アイコンです。

HTML

1<div id="menu-show"> 2 <i class="fab fa-airbnb"></i> 3</div>

以下モーダルです。

HTML

1<div id="menu-list"> 2 <ul> 3 <li class="open">概要</li> 4 <li><a href="">準備</a></li> 5 <li><a href="">安全</a></li> 6 <li><a href="">マネープラン</a></li> 7 </ul> 8</div>

SCSS

1#menu-list { 2 position: fixed; 3 top: 0; 4 right: 0; 5 bottom: 0; 6 left: 0; 7 width: 100%; 8 height: 100%; 9 z-index: 2000; 10 background: white; 11 display: none; 12 ul{ 13 width: 100%; 14 height: 100%; 15 position: absolute; 16 top: 85px; 17 left: 30px; 18 li { 19 list-style: none; 20 padding: 20px 0; 21 font-size: 14px; 22 font-weight: bold; 23 a { 24 color: black; 25 } 26 } 27 .open { 28 color: green; 29 border-bottom: 1px solid silver; 30 padding-bottom: 15px; 31 margin-bottom: 10px; 32 } 33 } 34}

//#menu-showはiconタグに付けています(アイコンをクリックすることでページ表示をさせるため。)

jQuery

1$(function(){ 2$('#menu-show').click(function(){ 3 if($('#menu-list').css('display')=='none') { 4 $('#menu-list').sildeDown(); 5 }else { 6 $('#menu-list').sildeUp(); 7 } 8 }); 9});

試したこと

slidedownでは無くjquery上でcssをdisplay:noneからblockに書き換えて表示する方法では動作しました。

jquery自体は動作しているのでscriptの読み込みミスやバージョンが原因ではないと思います。

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

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

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

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

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

guest

回答1

0

ベストアンサー

typoです。
sildeDownslideDown

コメントを受けて追記

サンプル

投稿2020/06/02 01:36

編集2020/06/02 05:54
Lhankor_Mhy

総合スコア35865

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

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

tkmvictim

2020/06/02 05:26

すみませんかなり煮詰まっていてケアレスミスを見落としていました タイプミス修正しましたが依然としてスライドダウン出来ません。 showメソッドやhideメソッドでは表示、非表示は出来ますがslideDown,slideUpではピクリともしません。
Lhankor_Mhy

2020/06/02 05:53

ご提示のコードを試してみましたが、当方では問題は発生しませんでした。 サンプルを追記しておきます。
tkmvictim

2020/06/02 06:21

回答ありがとうございました。 自分の書いているコード上で何故動作しないのか原因究明してみます。
Lhankor_Mhy

2020/06/02 06:24

予想ですが、wordpressを使っているとか、jQuery slim を使っているとか、そういう理由ではないかな、と思います。
tkmvictim

2020/06/02 06:42

bootstrapと併用して作っていますがWordPressは使用していません。 また、jqueryの読み込みも<script type="text/javascript" src="jquery-3.5.1.min.js"></script>としており、jQuery slimは使用していません。 検証してみた所、slideDownがfunctionとして認識されていないとエラーメッセージが出ているのでjavascriptの競合が起こっているんですかね?
tkmvictim

2020/06/02 06:52

すみません、bootstrapの公式にあるスターターテンプレートをコピペして使用していたため気付かずslim版を使用していました。 headタグの最後にフル版を読み込み、bodyタグの閉じタグの直前でslim版を読み込んでいたのが原因でした。 ドットインストールで学習してそのままbootstrapを使用していたのであまり理解が出来ていませんでした。 お手数お掛けして申し訳ありませんでした。ありがとうございました。
Lhankor_Mhy

2020/06/02 06:55

ご解決されて何よりです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問