Q&A
挙動を説明してください
buttonタグを使ったプルダウンを作りたいです。ベースはHTMLで作ったのですがこれにどうゆうCSSもしくはjavascriptを使えばbuttonタグを使ったプルダウンが作れるのでしょうか？
写真の上から順番に
①ボタンをクリック
②リストを展開
③リストのクリックしたものを表示
と言うようなシステムを制作したいです.
参考サイトのようにコードを書きましたが
このようにリストを表示した後クリックしても参考サイトのように「項目を選択して下さい」のところに選択した項目が表示されると言う挙動をシステムを作ることができませんどうすれば良いでしょうか？
該当のソースコード
<HTML> <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">項目を選択してください</button> <ul class="dropdown-menu"> <li><button class="dropdown-item" value="項目1">項目1</button></li> <li><button class="dropdown-item" value="項目2">項目2</button></li> <li><button class="dropdown-item" value="項目3">項目3</button></li> </ul> </div>JavaScript
$(function(){
$(".dropdown-menu .dropdown-item").click(function(){
var visibleItem = $(".dropdown-toggle", $(this).closest(".dropdown"));
visibleItem.text($(this).attr("value"));
sessionStorage.setItem("time", $(this).attr("value"));
}
挙動と言うのは現在制作しているプルダウンの挙動か実装したいプルダウンの挙動のどちらですかね？
前者は写真で更新しました。後者は下にリストを展開するタイプのプルダウンを想定しています。
説明不足ですいません。
何をしたら、どうなるかが書かれていません
あなたの思うプルダウンと、常識的なプルダウンが違うものかもしれません
説明と実装したいもののイメージ写真を追加しました。リストをクリックしてそれを表示すると言う挙動のシステムが作りたいです。optionではなくcssで作ることを考えています。
クリックでメニューがでるのですね？
メニューは引っ込まなくていいんですか？
メニューの中の一つをクリックするとそれが表示されメニューが引っ込むと言う挙動が望ましいです
画像の見た目、挙動は select option のようですが、select option ではだめなんですか。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/select
optionを使わずjavaScriptなどを使って制作したいです。やってみたことについて追記しました。
いまさらですがjavaは関係ないですね？
参考にしたリンク先は Bootstrap を使うのが前提ですが、それらの関連ファイルは読み込んでますか。
追記しましたがJava Scriptで制作することも試してみました。
できないのでJavaScriptでのやり方が分かるならご教授下さい
とりあえず、リンク先の最後のソースコード全体をコピーして保存して実行してみてください。
希望通りの動作になるはずです。
Bootstrap関連のファイルを読み込みですので。
回答1件
0
ベストアンサー
たとえば
CSS
1.dropdown .dropdown-menu{display:none} 2.dropdown:hover .dropdown-menu{display:block}
投稿2021/01/21 13:30
総合スコア115010
追記された内容であればこんな感じ？
<script>
window.addEventListener('DOMContentLoaded', ()=>{
const ul=document.querySelector('.dropdown-menu');
ul.classList.add('hide');
document.addEventListener('click',(e)=>{
if(e.target.closest('.dropdown')){
ul.classList.toggle('hide');
}
})
});
</script>
<style>
.hide{display:none}
</style>
セレクトしたら選んだ項目が表示されるのでしたら
「Select your region」が書き換わればよいのでしょうか？
「Select your region」のボタンと、ul内のボタンだと
属性がぜんぜん違うみたいですけど、どちらの属性を優先するのでしょうか？
そうですね。「Select your region」が書き換わることを想定しています
yambejpさんの下さった案とoptionタグを使ったものの両方を作ってみました。
どちらもうまく稼働しています。ありがとうございました。
あなたの回答
tips
プレビュー
