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

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

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

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

jQuery

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

HTML

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

CSS

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

Q&A

解決済

1回答

2757閲覧

ボタンを押すとカラムが表示されて詳細を選べるようなコードを書きたい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

jQuery

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2017/08/04 08:43

編集2017/08/07 00:45

###前提・実現したいこと
以下のイメージのボタンを押すとドロップダウンメニューが表示されて詳細を選べるようなコードを書いています。
表示されたメニューをクリックするとURLへ飛ぶようにしたいと考えています。
イメージ説明

###発生している問題・エラーメッセージ
▼マークのボタンをクリックすると詳細が表示されるような動きをどのように実現したら良いかわからず困っています。

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

HTML/CSSの現状

1<html> 2<head> 3<style type="text/css"> 4div.controlbox { 5 text-align: center; 6 margin: 0.3em 0px 1em 0px; 7 } 8 9 .square_btn{ 10 display: inline-block; 11 padding: 0.5em 1em; 12 text-decoration: none; 13 background: #FF69B4;/*ボタン色*/ 14 color: #FFF; 15 border-bottom: solid 4px #FF69B4; 16 border-radius: 3px; 17} 18.square_btn:active {/*ボタンを押したとき*/ 19 -ms-transform: translateY(4px); 20 -webkit-transform: translateY(4px); 21 transform: translateY(4px);/*下に動く*/ 22 box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);/*影を小さく*/ 23 border-bottom: none; 24} 25 </style> 26</head> 27<center> 28<p>ホテルを探す</p> 29<p> 30<a href="#" class="square_btn">▼北海道</a> 31<a href="#" class="square_btn">▼東北</a> 32<a href="#" class="square_btn">▼関東</a> 33<a href="#" class="square_btn">▼中部</a> 34</p> 35<p> 36<a href="#" class="square_btn">▼近畿</a> 37<a href="#" class="square_btn">▼中国</a> 38<a href="#" class="square_btn">▼四国</a> 39<a href="#" class="square_btn">▼九州</a> 40</p> 41</center> 42<body> 43<CENTER>

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

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

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

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

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

guest

回答1

0

ベストアンサー

クリックしたら表示・非表示ならcssとチェックボックスでやるほうがデータが保持できるのでよいかも

css

1.areaview {display:none;} 2.areaview+p{display:none;} 3.areaview:checked+p{display:block;}

HTML

1<p>ホテルを探す</p> 2<p> 3<label for="hokkaido">▼北海道</label> 4<label for="tohoku">▼東北</label> 5<label for="kanto">▼関東</label> 6<label for="chubu">▼中部</label> 7</p> 8<p> 9<label for="kinki">▼近畿</label> 10<label for="chugoku">▼中国</label> 11<label for="shikoku">▼四国</label> 12<label for="kyushu">▼九州</label> 13</p> 14 15<input type="checkbox" id="hokkaido" class="areaview"><p>北海道</p> 16<input type="checkbox" id="tohoku" class="areaview"><p>青森 秋田 岩手 山形 宮城 福島</p> 17<!--略--> 18<input type="checkbox" id="kyushu" class="areaview"><p>福岡 佐賀 長崎 大分 熊本 宮崎 鹿児島 沖縄</p>

追記

アコーディオン的な処理を希望されているとなると、やはり追加でjavascriptが必要ですね
こんな感じでどうでしょうか?

javascript

1document.addEventListener('click',function(e){ 2 var t=e.target; 3 if(t.classList.contains('areaview')){ 4 var c=t.checked; 5 Array.prototype.map.call(document.querySelectorAll('.areaview'),function(i){ 6 i.checked=false; 7 t.checked=c; 8 }); 9 } 10})

投稿2017/08/04 09:07

編集2017/08/07 00:57
yambejp

総合スコア114572

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

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

退会済みユーザー

退会済みユーザー

2017/08/07 00:27

ご回答ありがとうございます。 いただいたコードだと、一度北海道をクリックしたら、東北をクリックしても北海道の表示が残ったままなのですが、消すためにはどうしたらいいですか
yambejp

2017/08/07 00:58

やはりjavascriptが必要そうなので追記しました
退会済みユーザー

退会済みユーザー

2017/08/07 03:12

ありがとうございました。おかげさまで解決しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問