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

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

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

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

HTML

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

CSS

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

Q&A

解決済

2回答

575閲覧

jQuery ドロップダウンメニューでURLにリンクさせるには

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2017/08/07 01:33

###前提・実現したいこと
以下のサイトを参考にしてjQuery ドロップダウンメニューを作成しています。
参考サイト

###発生している問題・エラーメッセージ
以下のコードでドロップダウンメニューに表示されたメニュー1のteratailをクリックしても指定したURLに飛ばないので困っています。

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

HTML

1<html> 2<head> 3 4<style> 5#menu div { 6 position: relative; 7} 8 9span { 10 cursor: pointer; 11} 12 13ul { 14 display: none; 15 position: absolute; 16} 17</style> 18 19<body> 20<div id="menu"> 21<div> 22<span>メニュー 1</span> 23<ul> 24<li><a href="https://teratail.com/">teratail</a></li> 25<li><a href="#">メニュー 1-2</a></li> 26<li><a href="#">メニュー 1-3</a></li> 27</ul> 28</div> 29<div> 30<span>メニュー 2</span> 31<ul> 32<li><a href="#">メニュー 2-1</a></li> 33<li><a href="#">メニュー 2-2</a></li> 34<li><a href="#">メニュー 2-3</a></li> 35</ul> 36</div> 37<div> 38<span>メニュー 3</span> 39<ul> 40<li><a href="#">メニュー 3-1</a></li> 41<li><a href="#">メニュー 3-2</a></li> 42<li><a href="#">メニュー 3-3</a></li> 43</ul> 44</div> 45</div> 46 47<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> 48<script> 49$(function () { 50 $('span').click(function() { 51 if ($(this).attr('class') == 'selected') { 52 // メニュー非表示 53 $(this).removeClass('selected').next('ul').slideUp('fast'); 54 } else { 55 // 表示しているメニューを閉じる 56 $('span').removeClass('selected'); 57 $('ul').hide(); 58 59 // メニュー表示 60 $(this).addClass('selected').next('ul').slideDown('fast'); 61 } 62 }); 63 64 // マウスカーソルがメニュー上/メニュー外 65 $('span,ul').hover(function(){ 66 over_flg = true; 67 }, function(){ 68 over_flg = false; 69 }); 70 71 // メニュー領域外をクリックしたらメニューを閉じる 72 $('body').click(function() { 73 if (over_flg == false) { 74 $('span').removeClass('selected'); 75 $('ul').slideUp('fast'); 76 } 77 }); 78}); 79</script> 80 81</body> 82 83</head> 84</html> 85

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

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

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

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

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

guest

回答2

0

メニュー2,3を消したら飛んだよー。
メニュー2,3と被ってるだけですね。

投稿2017/08/07 01:49

Tak1016

総合スコア1408

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

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

0

ベストアンサー

メニューのクリック判定エリアが被っているために、teratailを押せていないだけです。
これで手っ取り早く動作確認できます。

css

1#menu div { 2 position: relative; 3 float : left; 4}

クリックしたら、ちゃんとリンクでジャンプしていますよ。

投稿2017/08/07 01:47

zohnam

総合スコア1441

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

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

退会済みユーザー

退会済みユーザー

2017/08/07 01:58

ご回答ありがとうございます。CSSの扱いにも慣れていないため、コードをご提示いただいて非常に助かりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問