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

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

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

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

ドロップダウンメニュー

GUIを操作するユーザーインターフェイスで、リストボックスに似ており、ユーザーがリストから値を選べるようにするものです。ドロップダウンのリストが非アクティブの場合は、単体の値を表示します。アクティブ化されると、ユーザーが選択可能な値のリスト一覧を表示(ドロップダウン)します。

jQuery

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

HTML

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

CSS

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

Q&A

解決済

1回答

751閲覧

はてなブログのドロップダウンメニューについて。

lagrun12345

総合スコア9

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

ドロップダウンメニュー

GUIを操作するユーザーインターフェイスで、リストボックスに似ており、ユーザーがリストから値を選べるようにするものです。ドロップダウンのリストが非アクティブの場合は、単体の値を表示します。アクティブ化されると、ユーザーが選択可能な値のリスト一覧を表示(ドロップダウン)します。

jQuery

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/06/13 15:53

前提・実現したいこと

ブログにて、ドロップダウンメニューの項目の表示を実装したい。

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

発生してる問題が、ドロップダウンメニューの項目がPC上、タブレット上に、表示されているが、肝心のスマートフォンの表示ができない。

1、PC,タブレット上では、メニュー項目が表示され、その項目へのページに飛べる。
2、スマートフォン上だと、"MENU"という項目だけが表示されており、タップしても、無反応な状態となる。

エラーメッセージ 特になし

該当のソースコード

<div id="menu"> <div id="menu-inner"> <div id="btn-content"> <span id="menu-btn"><i class="blogicon-reorder"></i> MENU</span> </div> <ul id="menu-content"> <li> <a href="https://lagrun123.hateblo.jp/">A<i class="blogicon-chevron-down"></i></a> </li> <li><a href="URL">自己紹介 <i class="blogicon-chevron-down"></i></a> </li> <li><a href="1階層目のリンク">B<i class="blogicon-chevron-down"></i></a> </li> <li> <a href="URL"> C<i class="blogicon-chevron-down"></i></a> </li> </ul> </div> </div> <div style="clear:both"></div> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> $(function(){ var menuBtn = $("#menu-btn"), menuContent = $("#menu-content"); menuBtn.click(function(){ menuContent.slideToggle(); }); $(window).resize(function(){ var win = $(window).width(), p = 960;//19 if(win > p){ menuContent.show(); }else{ menuContent.hide(); } }); }); </script> ```スクリプト② <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> document.addEventListener("DOMContentLoaded", function(){ $('.dropdown-menu').hover(function() { $(this).find(".global-contents").addClass('global-show'); }, function() { $(this).find(".global-contents").removeClass('global-show'); } ); $('.dropdown-menu').click(function() { if ($(this).find(".global-contents").hasClass("global-show")) { $(".dropdown-menu").find(".global-contents").removeClass("global-show"); } else { $(".dropdown-menu").find(".global-contents").removeClass("global-show"); $(this).find(".global-contents").addClass("global-show"); } }); }); </script> ----CSS /* <system section="theme" selected="6653586347155924442"> */ @import "https://blog.hatena.ne.jp/-/theme/6653586347155924442.css"; /* </system> */ /* <system section="background" selected="pattern-02"> */ body{ background-image: url('/images/theme/backgrounds/2014/pattern-02.png'); background-repeat: repeat; background-attachment: fixed; background-position: 0 0; background-size: 40px 70px; } @media (-webkit-min-device-pixel-ratio: 2) { body {background-image: url('/images/theme/backgrounds/2014/pattern-02@2x.png');} } /* </system> */ /* Responsive: yes */ /*****グローバルメニュー****/ #menu{ width: 100%; margin: 10px auto; background: #444;/*7*/ } #menu-inner{ width: 1000px;/*1*/ height: 40px;/*2*/ margin: 0 auto; background: #444;/*8*/ } #menu-btn{display: none;} #menu-content{ padding-left: 0; margin: 0; width: 100%; height: 100%; list-style-type: none; } #menu-content > li{ position: relative; float: left; height: 100%; text-align: center; } #menu-content > li > a{ position: relative; display: block; height: 100%; padding-left: 15px;/*3*/ padding-right: 15px;/*3*/ line-height: 40px;/*2*/ background: #444;/*9*/ color: #fff;/*10*/ font-size: 70%; text-decoration: none; z-index: 2; } #menu-content > li > a:hover{ background: #555;/*11*/ color: #fff;/*12*/ } #menu-content > li > a > .blogicon-chevron-down{margin-right: 5px;} /*2階層目*/ #menu-content > li > ul.second-content{ visibility: hidden; position: absolute; top: 0; margin: 0; padding-left: 0; ### 試したこと ネットでの検索でスマホ対応のコードを打ってもうまくできなかったです。 ### 補足情報(FW/ツールのバージョンなど) PC,タブレット上では"MENU"ボタンが無い状態で、スマホ上では"MENU"ボタンがある状態になっています。 これは、PC,タブレット、スマホどの画面上にも"MENU"ボタンをつけないとだめなのかなと思っています。。

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

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

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

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

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

m.ts10806

2018/06/13 23:14

コードはコードブロック```で囲ってください。後半丸出しになっています。(css、javascriptはブロックをわけてもらえると見やすいです)
Lhankor_Mhy

2018/06/14 03:56

https://lagrun123.hateblo.jp/ ブログを拝見しましたが、HTMLに .global-contents の要素が見当たりませんでした。このままでは当然動作しないかと思いますが、どのような意図でこのコードを書かれていますか?
lagrun12345

2018/06/14 04:11

サイトからコピペしただけなので、、意図は特にないですね。
guest

回答1

0

ベストアンサー

js

1document.addEventListener("DOMContentLoaded", function(){ 2 $('.dropdown-menu').hover(function() { 3 $(this).find(".global-contents").addClass('global-show'); 4 }, 5 function() { 6 $(this).find(".global-contents").removeClass('global-show'); 7 } 8 ); 9 $('.dropdown-menu').click(function() { 10 if ($(this).find(".global-contents").hasClass("global-show")) { 11 $(".dropdown-menu").find(".global-contents").removeClass("global-show"); 12 } else { 13 $(".dropdown-menu").find(".global-contents").removeClass("global-show"); 14 $(this).find(".global-contents").addClass("global-show"); 15 } 16 }); 17});

https://lagrun123.hateblo.jp/

セレクタで示されている、.dropdown-menu .global-contentsがHTMLに存在せず、global-showがCSSに存在しないのが原因です。
解決方法ですが、HTML構造に合わせてセレクタを変えるか、セレクタに合わせてHTMLの属性を変えるか、をすれば動作すると思います。

投稿2018/06/14 06:16

Lhankor_Mhy

総合スコア35871

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問