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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

CSS

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

Q&A

解決済

1回答

3131閲覧

<ul><li>のリストを480px以下の時にセレクトボックスにしたいです

mimimax

総合スコア36

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

CSS

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

1グッド

1クリップ

投稿2016/03/25 04:38

レスポンシブサイトを目指して、ページを作成している初心者です。
複数個の<li>要素をウィンドウ幅が480px以下の時に、セレクトボックス形式にしたいのですが、うまくいきません。ウィンドウ幅が開いた状態では普通のボタンにしたいので<ul><li>で組んでおります。

イメージ説明

開くようには出来たのですが、その後がどうしてもわかりません。
https://jsfiddle.net/yoshidamimi/um2x0sda/1/

したいことは、
(1)3つのセレクトバーそれぞれが別に機能する
(2)セレクト部分が伸びて開いて、選んだボタン(クラス名にis-checkedが追加されたもの)が表示された状態で、セレクト部分が閉じる。
(3)リンクにとぶ訳ではなく、その3つのセレクトバーで選ばれたもの(クラス名にis-checkedがあるもの)の組み合わせで、記事内に出るイラストを変えるボタンになります。

基礎的なことなのかもしれませんが、どうしても理解できずお力をお借りしたいです。
よろしくお願いいたします。

act823👍を押しています

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

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

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

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

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

guest

回答1

0

ベストアンサー

下記で(1)と(2)は満たせると思います。

あとは(3)ですが、
is-checkedクラスがついた要素を探し、
画像を変えるだけです。

わからないようであれば再度回答します。

JavaScript

1$(window).load(function(){ 2 $(function() { 3 $("li.button:not(.is-checked)").hide(); 4 $("ul.button-group").click(function() { 5 $("li",this).show(); 6 $("li",this).each(function(){ 7 $(this).css( "zIndex", 1 ) 8 }); 9 $("li",this).on( 'click', function() { 10 $(this).parent(".button-group").find('.is-checked').removeClass('is-checked'); 11 $( this ).addClass('is-checked'); 12 $(this).parent(".button-group").children("li.button:not(.is-checked)").hide(); 13 $(this).parent(".button-group").children("li").off('click'); 14 $(this).parent(".button-group").children("li").each(function(){ 15 $(this).css( "zIndex", 0 ); 16 }); 17 return false; 18 }); 19 }); 20 }); 21});

--
追記:
コメントの(1)について回答します。
480以下の場合に処理を実行するのはいいですが、
480を超える場合は追加した処理を消す必要があります。
よって、以下のようにすればよいかと思います。
ただし、このままだと縦並びのままなので、横並びにするよう、
classを付け替えてやる必要があります。
(removeClass&addClass)

JavaScript

1$(window).load(function(){ 2 changeDisplay(); 3}); 4window.onresize = function(){ 5 changeDisplay(); 6} 7function changeSelectedButton(ele){ 8 // もともと選択されていたliからis-checkedクラスを外す 9 $(ele).parent(".button-group").find('.is-checked').removeClass('is-checked'); 10 // 選択したボタンにis-checkedクラスをつける 11 $(ele).addClass('is-checked'); 12} 13function changeDisplay(){ 14 if($(window).width() <= 480){ 15 // 横幅が480以下であれば 16 /* 17 ここに横並び用classを外し、縦並び用classをつける処理を加える 18 */ 19 // 非選択状態のボタンを非表示 20 $("li.button:not(.is-checked)").hide(); 21 22 // ulタグにonclickイベントを付加 23 $("ul.button-group").on('click', function() { 24 // ulがクリックされたら 25 // 非表示にしていたボタンを表示する 26 $("li",this).show(); 27 28 // クリックされたulの中のli全てに処理 29 $("li",this).each(function(){ 30 // 手前に表示するため、zIndexを変更 31 $(this).css( "zIndex", 1 ) 32 }); 33 34 // クリックされたulの中のボタンにonclickイベントを付加 35 $("li",this).on( 'click', function() { 36 // ボタンがクリックされたら 37 // 選択状態を変更する 38 changeSelectedButton(this); 39 40 // 非選択状態のタグを非表示にする 41 $(this).parent(".button-group").children("li.button:not(.is-checked)").hide(); 42 43 // ボタンのonclickを外す 44 $(this).parent(".button-group").children("li").off('click'); 45 46 // 手前に表示するための処理を打ち消す 47 $(this).parent(".button-group").children("li").each(function(){ 48 $(this).css( "zIndex", 0 ); 49 }); 50 51 // ulのonclickが発火しないよう、falseを返す 52 return false; 53 }); 54 }); 55 }else{ 56 // 横幅が480より大きければ 57 // 480以下のときに加えた処理を打ち消します 58 59 // 打ち消し処理ここから 60 // ボタンは全て表示する 61 $("li.button").show(); 62 63 // ulのonclickは不要のため外す 64 $("ul.button-group").off('click') 65 // 打ち消し処理ここまで 66 67 /* 68 ここに縦並び用classを外し、横並び用classをつける処理を加える 69 */ 70 71 } 72}

--
追記2:
ulのonclickが発火しないよう、return falseしていたのが原因ですね。
下記で出来るかと思います。
眠い状態で書いたので間違いあったらごめんなさい。

JavaScript

1$(window).load(function(){ 2 changeDisplay(); 3 $.fn.events = function(){ 4 return $._data( $(this).get(0)).events 5 }; 6}); 7window.onresize = function(){ 8 changeDisplay(); 9} 10function changeSelectedButton(ele){ 11 // もともと選択されていたliからis-checkedクラスを外す 12 $(ele).parent(".button-group").find('.is-checked').removeClass('is-checked'); 13 // 選択したボタンにis-checkedクラスをつける 14 $(ele).addClass('is-checked'); 15} 16 17// liが展開されているかのフラグ 18var showFlag = false; 19// 横幅の前回の値 20var beforeWidth = -1; 21function changeDisplay(){ 22 if(!(beforeWidth <= 480 && $(window).width() <= 480) && !(beforeWidth > 480 && $(window).width() > 480)){ 23 // リサイズ前と後で閾値を跨いでいれば 24 if($(window).width() <= 480){ 25 // 横幅が480以下であれば 26 27 // フラグ初期化 28 showFlag = false; 29 // 非選択状態のボタンを非表示 30 $("li.button:not(.is-checked)").hide(); 31 32 // ulタグにonclickイベントを付加 33 $("ul.button-group").on('click', function(event) { 34 // ulがクリックされたら 35 36 if(!showFlag){ 37 // ボタンが非表示の場合 38 // 非表示にしていたボタンを表示する 39 $("li",this).show(); 40 41 // フラグをたてる 42 showFlag = true; 43 44 // クリックされたulの中のli全てに処理 45 $("li",this).each(function(){ 46 // 手前に表示するため、zIndexを変更 47 $(this).css( "zIndex", 1 ) 48 }); 49 50 // クリックされたulの中のボタンにonclickイベントを付加 51 $("li",this).on( 'click', function() { 52 53 // ボタンがクリックされたら 54 // 選択状態を変更する 55 changeSelectedButton(this); 56 57 // 非選択状態のタグを非表示にする 58 $(this).parent(".button-group").children("li.button:not(.is-checked)").hide(); 59 60 // ボタンのonclickを外す 61 $(this).parent(".button-group").children("li").off('click'); 62 63 // 手前に表示するための処理を打ち消す 64 $(this).parent(".button-group").children("li").each(function(){ 65 $(this).css( "zIndex", 0 ); 66 }); 67 68 // ulのonclickが発火しないよう、falseを返す 69 //return false; 70 }); 71 }else{ 72 showFlag = false; 73 } 74 }); 75 }else{ 76 // 横幅が480より大きければ 77 // 480以下のときに加えた処理を打ち消します 78 79 // 打ち消し処理ここから 80 // ボタンは全て表示する 81 $("li.button").show(); 82 83 // ul、liのonclickは不要のため外す 84 $("ul.button-group").off('click'); 85 $("li.button").off('click'); 86 87 // 打ち消し処理ここまで 88 } 89 } 90 beforeWidth = $(window).width(); 91}

投稿2016/03/25 06:13

編集2016/03/31 18:42
moredeep

総合スコア1507

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

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

mimimax

2016/03/25 09:00

ありがとうございます! 思い通りに動きました。2日いじり倒しても叶わなかったので助かりました! 申し訳ないのですが、あと2点お知恵をお借りできますでしょうか? (1)480pix以上にてページを開いた時(ボタンで横並びになります)、li.buttonが消えてしまっているので、480pix以上の時は初期から表示させたいです。 (2)480pix以下の状態で、選択後(クラス名にis-checkedが追加されたブルー表示になったもの)が表示された時の下のグレーボーダーを消したいです。 これもjavascript上でなんとかなるのでしょうか? お時間ある時に、ご教示いただけると幸いです。
mimimax

2016/03/26 05:04

すみません、追記させていただきます。 (1)の"480pix以上でもli.buttonを表示させたい"というより"頂いたjs全て480px以下の時に動作させたい"というお願いです。 http://bl6.jp/web/javascript/change-process-get-window-size/の $(window).resize〜のif式の中にポッコリ頂いた構文を入れてみたのですが、作動しませんでした...。 (2)のほうはcssで解決できました。すみません。
moredeep

2016/03/26 09:22

(1)について、回答に追記しました。 これで解決できればいいのですが。 蛇足ですが、 $(window).load(/*処理*/)は(画像も含む)全てを読み込んだ後に実行するもので、 $(function() {/*処理*/})はHTMLコードを読み込んだ後に実行するものです。 片方だけで問題ないです。
mimimax

2016/03/27 04:44

迅速なご回答ありがとうございます!コピペで横に並びました。コード内にご親切なコメントも頂きありがとうございます。とてもとても勉強になります。 申し訳ないのですが、私このコードに悩みすぎて(2日)仕事がたまってしまって、今日明日はちゃんと検証することができません。もうちょっとお聞きしたいことが発生した場合を考えて、もう少しこの質問の"解決済"を待っていただいても良いでしょうか? しつこくてすみません...
moredeep

2016/03/28 03:43

〆を伸ばすのは、私は構いません。 だたし、もし込み入った内容になるようであれば、 追加の質問を新たに見た人が理解し辛くなってしまうかも知れないので、 新しく質問を追加した方がいいです。 (私が答えられるとも限りませんので。。。) その方が、良い答えが集まりやすくなります。 簡単なものであれば、コメントなり追記なりしちゃってください。
mimimax

2016/03/31 15:17

お言葉に甘えて質問させていただきます。私が大きな勘違いをしてました(すみません!) isotope(http://isotope.metafizzy.co/)を使用しているのですが、最初の質問に書きました『クラス名にis-checkedが追加されたもの』が並べ替えのスイッチになっていると思っていたのですが、クラス名is-checkedは色を変えるためのクラス名で、画像を並び替える命令は(isotope.pkgd.js内の4271行目あたり)で出ているようで、頂いたスクリプトで選択した項目でその命令が作動しないようなのです。 フリーサーバにアップさせていただきました。 http://omatome.sitemix.jp/ ファイルは下記にアップいたしました。 http://11.gigafile.nu/c6a5ffc28dc6b58539299d5790b4b7b59-0408 叶えたいことは (1)480px以下のメニューを選択した時に並べ替えを作動させたい (2)480px以上の時にクラス名is-checkedをつけるというスクリプトが、isotope.pkgd.js内とぶつかっているようで作動しないので解決したい。 です。 すいません、これが『込み入った内容』なのか判断つかず、追記させていただきました。問題あれば、別質問にて投稿させていただきます。 図々しくすみません。よろしくおねがいします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問