###前提・実現したいこと
現在、下記のような、カテゴリをセレクトすると写真が絞り込みされるような
フォトギャラリーを作っております。
セレクトボックスを<select><option>タグで作ろうと思ったのですが、
select自体のデフォルトの線や矢印を消すことはできても下記の赤線の部分
optionの一覧の周りの線やoptionを消すことはできませんでした。
そのため、セレクトボックスを<select><option>タグではなく<ul><li>で実現したい
のですが、そのための方法や、参考サイトなどをご教授いただけたら嬉しいです。
どうぞよろしくお願いいたします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
ベストアンサー
はじめまして!
以下の内容で良さそうであれば、いろいろいじってみてくださいm(_ _)m
セレクトされたアイテムにクラス"selected"を付与して選択されたものとそうでないものを区別しています。
HTML
1<div class="display_selectedItem"></div> 2<ul class="select_box"> 3 <li class="selected">選んでね</li> 4 <li>りんご</li> 5 <li>バナナ</li> 6 <li>桃</li> 7 <li>オレンジ</li> 8</ul>
Javascript
1 $(function(){ 2 var selectedItem = $("ul.select_box li.selected").text() 3 var selectBox = $("ul.select_box") 4 var selectItems = $("ul.select_box li") 5 var display = $(".display_selectedItem") 6 7 display.text(selectedItem) 8 selectBox.hide(); 9 $("li.selected").css("background","#f8f8f8"); 10 11 display.on("click",function(){ 12 selectBox.show(); 13 }) 14 15 selectItems.on("click",function(){ 16 selectItems.removeClass("selected").css("background","#fff"); 17 $(this).addClass("selected").css("background","#f8f8f8"); 18 selectedItem = $("li.selected").text() 19 selectBox.hide(); 20 display.text(selectedItem) 21 }) 22 })
css
1.display_selectedItem { 2 width: 200px; 3 box-sizing: border-box; 4 border: 2px solid #c5c5c5; 5 border-radius: 10px; 6 padding: 5px 10px; 7} 8.select_box { 9 width: 200px; 10 border: 1px solid #c5c5c5; 11} 12.select_box li { 13 cursor: default; 14 box-sizing: border-box; 15 padding: 2px 10px; 16}
投稿2016/09/07 01:38
編集2016/09/07 01:39総合スコア328
0
ご質問ありがとうございますm(_ _)m
Javascript
1$(".select_box").mouseleave(function(){ 2 $(this).hide() 3});
上記でご希望の動きになりませんか?
よろしければご確認ください^^/
ちなみに、mouseover()/mouseout()は余計な動きが入りチラチラしやすいので、
メニュー等に使う際はmouseenter()/mouseleave()をお勧めします^^
参考:
jQuery .mouseenter() / .mouseleave() と .mouseover() / .mouseout() の違い
投稿2016/09/07 05:13
総合スコア328
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/09/07 02:11
2016/09/07 02:17
2016/09/07 02:25
2016/09/07 04:47