🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
HTML

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

CSS

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

Q&A

1回答

2047閲覧

固定ヘッダーのナビのリンクが効かない

Fumika8

総合スコア6

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/11/18 14:11

ヘッダーのナビのリンクがリンク先をクリックしても飛びません。

状況としては下記です。

●ヘッダーをfixedで固定して、スクロールしてもつねに上部にあるようにしている
●ナビにはjQueryを設定して、クリックするとドロップダウンするようにしている
●ヘッダーにはZ-indexを設定している

◎試したこと
調べると、z-indexが原因で、リンクが下にあるという記事をみつけたので、
ナビアイテム部分やリンク部分のz-indexをヘッダーよりも大きくしてみましたが、
やはりリンクしませんでした。

ソースは下記です。

▼HTML ナビ部分

<nav class="pc"> <ul class="dropdwn"> <li class="nav-cont"><p>●●について</p> <ul class="dropdwn_menu"> <li><a href="">●●紹介ページ</a></li> <li><a href="">●●オプション紹介</a></li> <li><a href="">●●方法</a></li> <li><a href="">●●事項</a></li> <li><a href="">よくある質問</a></li> </ul> </li> <li class="nav-cont"><a href=""><p>料金</p></a></li> <li class="nav-cont"><a href=""><p>方法</p></a></li> <li class="nav-cont"><a href=""><p>●●方法</p></a></li> <li class="nav-cont"><p>●●サービス</p> <ul class="dropdwn_menu"> <li><a href="">●●●●</a></li> <li><a href=">●●●●</a></li> </ul> </li> </ul> </nav>

▼css

header .dropdwn{ display: flex; position: absolute; z-index: 99; } .dropdwn li{ width: 228px; text-align: center; } .nav-cont p{ padding: 5px 0 7px; border-right: solid 1px #ccc; } .nav-cont p:hover{ border-bottom: solid 2px #328258; } header .dropdwn p:first-child{ border-left: solid 1px #ccc; } .dropdwn_menu{ display: none; background: rgba(245, 245, 245,0.9); z-index: 99; } .dropdwn_menu{ box-shadow: 2px 2px 4px #ccc; z-index: 99; } .dropdwn_menu li{ padding: 8px 0; border-bottom: solid 1px #ccc; } .dropdwn_menu li a{ display: block; } .dropdwn_menu li:hover{ border-bottom: solid 2px #328258; }

▼jQuery

jQuery(function($){ $('.dropdwn li').click(function(){ $(this).children('ul').slideToggle(); return false; }); });

調べてもどうしてもわかりません。。
どこが悪いかどうか教えてください。

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

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

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

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

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

guest

回答1

0

$('.dropdwn li').click(function(){

 ↓

$('.dropdwn > li').click(function(){

class="dropdwn"の直下のliにのみ適用

投稿2019/11/18 14:23

shun-K

総合スコア508

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

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

Fumika8

2019/11/18 14:45

ご回答、本当にありがとうございます。早速ためしてみましたが、効果はありませんでした。 横並びのメニューのうち、例えば「料金」や「方法」なんかはドロップダウンの設定はないのですが、 これらもリンクしない状況なんです。
shun-K

2019/11/18 14:59

失礼しました。 とりあえずreturn false;を消せば動きそうです。
Fumika8

2019/11/18 15:06

ありがとうございます!!! return falseを消したらいけました。。!! 本当にありがとうございました!!!!
kyoya0819

2019/11/18 22:31

横やり失礼します。 質問者さん。解決しましたらベストアンサーを選んでください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問