Q&A
アコーディオンメニューの定義が必ずしもオーソライズされていないので、HTMLのサンプルと、挙動の説明が必要です。おそらくCSSだけでできると思いますけど
素のjavascriptでアコーディオンを作るにはどうすればいいでしょうか？
jQueryは使えません
簡単な雛形をくだされば助かります
今のところ
document.getElementById("").style.display = "blcok";
でやろうとしてますができません
クリックするとdlごと消えます
aタグが必要なんでしょうか？
よろしくおねがいします
あなたが思うアコーディオンメニューの作り方を教えてください。簡単なやつです。仕組みをみて理解します。ただしjqueryなしの素のjavascriptです
ご自身で試された再現可能なコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
「jQueryは使えません」だけだど「なぜ使えないか」分かりません。具体的に記載してください。
今修行させられてます。自分としてはうまくいく予定でdocument.getElementById("").style.display = "blcok";を書いたんですが押すと何故かdlごと消えました。
質問本文に要件と試したことを具体的に記載してください
ご理解されてないようですが丸投げ質問は非推奨です。 https://teratail.com/help/avoid-asking >コードをください・デバッグしてください等の丸投げの質問
回答6件
0
とりあえず
CSS
1[name=m]{display:none;} 2[name=m]:not(:checked)+ul{display:none;}
HTML
1<form> 2<ul id="menu"> 3 <li><label for="m1">1</label><input type="radio" name="m" id="m1"> 4 <ul> 5 <li>1-1</li> 6 <li>1-2</li> 7 <li>1-3</li> 8 </ul> 9 </li> 10 <li><label for="m2">2</label><input type="radio" name="m" id="m2"> 11 <ul> 12 <li>2-1</li> 13 <li>2-2</li> 14 <li>2-3</li> 15 </ul> 16 </li> 17 <li><label for="m3">3</label><input type="radio" name="m" id="m3"> 18 <ul> 19 <li>3-1</li> 20 <li>3-2</li> 21 <li>3-3</li> 22 </ul> 23 </li> 24</ul> 25</form>
投稿2018/07/05 02:29
総合スコア114839
> あなたが思うアコーディオンメニューの作り方
質問者が思考停止している状態だと正直なにを書いても
無駄な気がします、いちおう回答はつけますけどね
どうせ「これじゃない」的なあとだしがあるんでしょうけど
この手の質問は懸念されてる通り回答者側のストレスになることもあるので
私はよくスルーしてます。
丸投げ質問にならないように追記修正依頼にコメントしてるんですが、応じてもらえない場合は大体そんなです。
css 芸すごい…
実際のところ質問者はヒントがほしいのでもましてや
説教がほしいのでもないのはわかっているので
とりあえず無駄だとわかっていながら回答はします
自称、日本一のお節介プログラム愛好家なので
> 自称、日本一のお節介プログラム愛好家なので
「要件さえ分かれば後は何とかなる」というところ見習いたいです。
私は質問関係なくyambejpさんの回答のコードで勉強になってます。
0
雛型
簡単な雛形をくだされば助かります
昔、作ったライブラリならあります。
http://vird2002.s8.xrea.com/test/accordion.html
attachEvent のラップ処理、forEach のPolyfillから当時の考えが見えますね。
aタグが必要なんでしょうか？
:target 疑似クラスを利用するのなら、そうですね。
今修行させられてます。自分としてはうまくいく予定で
他人のサンプルコードを提出するのはやめた方が無難です。
ぐぐればすぐにバレますし、コードの理解度チェックされて答えられなければ終わりです。
修業の為なら
いやいや他人のコードを提出なんて考えていませんよ。
「雛型」を希望したところから、他人のコードで提出することを連想しました。
少しコードを書き換えるだけで作れる出来合いのものを求める他の意図を、私は説明できません。
少なくとも、私は修業の為ならコードよりも解法を求めます。
コートを貰ってしまうと、自分の発想でアルゴリズムを考える機会を失います。
そして、何より課題の提出なら、今までに習った内容の復習が意義なので、見知らぬ他人の書いたコードを出せば「今までに習った内容」が含まれないかもしれません。
そうなれば、出題者に「何を聞いてたの？このコードはどこから出てきたの？」と質問を返されることは容易に想像できます。
正しいアプローチは次のようになると思います。
- 今までに習った内容を踏まえてコードを書いてみる
- 分からなければ、コードを基礎的な要素別に分解して、ミニマムコードで検証する
- それでも、分からなければ、ミニマムコードを元に質問する
ここで重要なのは、「習った範囲」でコードを書くことです。
基本的には、背景を全て知っている師に答えを求めるべきだと私は思います。
Re: anAnonymous さん
投稿2018/07/05 03:59
編集2018/07/05 10:35
総合スコア18164
> 他人のサンプルコードを提出するのはやめた方が無難です。
ぐぐればすぐにバレますし、コードの理解度チェックされて答えられなければ終わりです。
ここ気づかなかった。赤の他人にコード書かせて自分の課題提出のためにあてようという魂胆があったんでしょうね。
まさにavoid-asking。
いやいや他人のコードを提出なんて考えていませんよ。
修行の割りに丸投げというところでそういう印象を与えてしまっています。
https://teratail.com/help/question-tips#questionTips1-1
>あなたがそのようなつもりで質問しているのだと他のユーザーから誤解されないように、丁寧な質問を心がけましょう。
To: anAnonymous さん
親記事に追記しました。
> いやいや他人のコードを提出なんて考えていませんよ。
「雛形」を求めたのはなぜなのでしょうか。
「解き方」ではなく、「雛形」を優先する理由はありますか。
その質問はこのサイトに関係ないですよね。今後答えませんが一度だけ答えるとすれば写経すれば身につくからです。わからない部分はまた質問すればいいので。意識高い系の方々にはウケが悪いみたいですね。尊敬します。
なお上記答えへの返信は不要です。今後回答する気があるならする、ないならひっこんでいろ、もしあなたに管理者権限があるなら別ですが笑
ルール守らない人に意識高いも低いもないですね。ただの無法者です。そりゃまともな回答がつかなくて当然です。他所へどうぞ。
コードを出した後の第一声が「いやいや他人のコードを提出なんて考えていませんよ。」
「aタグが必要なんでしょうか？」に回答しても無反応。
その後も音沙汰なしですから、アドバイスしようがないですね。
そもそも、コードなら検索すればいくらでも見つかるわけですから、詰まっている部分を確認した上で要所を抑えた質問をすべきでしょう。
「意識低い系」かつ「モラル低い系」というところでしょうか(独り言なので返信不要)。
まずは質問したり回答に対して上から目線で評価したりグチグチ言う前にこちらを読むところからどうぞ。
https://teratail.com/help/question-tips
To: anAnonymous さん
ここは質問に回答するサイトです。
質疑応答は後々同じ問題にあった人が参考にする知見となるので、回答を貰ったら「解決した」「～までできたが、～は出来なかった」「～がわかったが、～がわからなかった」などなど、後々の人が参考にする情報を残すサイトです。公式にもそう書かれています。
https://teratail.com/help/question-tips#questionTips4-2
あなたは回答の「内容」に対して、何の反応も返さなかった。それだけの話です。
> 人生へのアドバイスをするサイトじゃない
サイトの意義を元に反論するなら、サイト内のルールは徹底して読むべきです。
https://teratail.com/help/avoid-asking
https://teratail.com/help/question-tips
あなたはmts10806さんが紹介して下さった事に対して「あなたはテラテイルの運営の方なんですか？」と反論していますが、運営ではないあなたが「人生へのアドバイスをするサイトじゃない」といっているのは自己矛盾です。
0
こういう質問って回答しないほうが teratail 的にいいんでしょうか。
投稿2018/07/05 02:12
総合スコア832
基本的に低評価つけるか、質問を充実してもらうべく指摘という形で良いかと。
回答しちゃダメということではないですが、丸投げ質問にそのままコードで答えるのは本人の今後のためにならないという考え方もあります。
https://teratail.com/help/avoid-asking
>問題や質問は実際に調査や作業に取り組み、具体的なところで生まれると考えるためです。
> 丸投げ質問にそのままコードで答えるのは本人の今後のためにならないという考え方もあります。
魚の取り方を教えよってやつですね。よくわかります。
あなたはテラテイルの運営の方なんですか？
質問に対する回答をする気があるならする、ないなら黙っているのが一番テラテイルの為になっていますよ。
現に有意義な回答が来てるじゃないですか。
写経の効果について勉強してください。理解出来ないなら今後写経を試みようとしている質問者の質問はスルーしてください。
あなたのような人がいるからweb界隈が気持ち悪がられるんです
teratailの使い方にそって使っているだけですが・・・？
https://teratail.com/help/question-tips
分からないなら分からないと言えばいいだけでは？
過去にも「teratail」というタグ付けで主に質問されているような方から質問が上がっていたり、主に回答されているような方から質問が上がっています。
その辺りちゃんと読んだ上で今のキャラでいこうとしてるならあなたが追い出されるだけですよ。
0
投稿2018/07/05 02:17
総合スコア5572
0
回答ではないです。今でているものに対しての指摘です。
js
1 2document.getElementById("").style.display = "blcok";
- IDの指定何もしていない
→HTMLでも提示があればまだまともな回答の余地はあるんですが
- blcokなんて指定は存在しない。 CSS:display blockです。スペルミスです。
aタグが必要なんでしょうか？
それは分かりません。如何様にも組めます。
そもそも逆に聞きたい。
質問者さんはjQuery使えば組めるんですか？
この短い質問内容だけで全て判断できるわけではないですが、
jQuery使ってもとても組めるようには思えません（失礼は承知です）
例で結構です。
jQueryで組んだコードを質問に追記してみてください。
jQueryはJavaScriptのライブラリです。内部的にはJavaScriptがガンガンに動いています。
もしjQueryで組むことができるのでしたら、それぞれ置き換えれば良いだけですよね？
なので、「勉強のためにjQueryではなくJavaScriptで組む」という練習されているのでしたら
まずjQueryで組んで出来た物に対して少しずつ変換していく というやり方が最も理にかなっています。
逆も然りです。JavaScriptで組めればjQueryでも組めます。
投稿2018/07/05 03:05
総合スコア80850
jqueryはできませんが以前やったことがあって思い出すほうが楽だろうなと思っただけです。jqueryの仕組みまでわかって初めてわかったと言えるんだというなら一理ありますね。とりあえず上記のスペルミスの指摘感謝します。しかしそれ以外は余計でしたね。
冒頭に直接の回答でないことは明記しています。
anAnonymousさんは回答者を評価できるほどの質問内容を組めていません。
無法者であることはこれまでのコメントで見ている人に伝わったと思うので、同等の質問を繰り返すようであればまともな回答がつくことは今後期待できません。
最低限下記は読んでteratailを利用してください。
https://teratail.com/help/question-tips
https://teratail.com/help/avoid-asking
現時点で低評価が10ついていますね。それがどういうことかを考えてみると良いです。
冒頭に断りがあるからなんなのか分からないんですがいらないこと書くの本当辞めてもらっていいですか？通報しますよ。
必要なことを書いてないご自身の質問内容を省みるのが先かと思いますが、ご自由にどうぞ。
0
こんばんは
これほど低評価がいっぱいついた回答初めてみました、、、
私も現在アコーディオンに挑戦中なので一緒に頑張りましょう！
「js アコーディオン」で検索すればサンプルがいっぱいでてきます。
投稿2018/07/09 16:48
総合スコア527
あなたの回答
tips
プレビュー
