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

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

ただいまの
回答率

90.48%

  • JavaScript

    17009questions

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

  • CSS

    6012questions

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

  • HTML5

    4179questions

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

  • CSS3

    2138questions

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

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

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 1,477

mimimax

score 28

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

イメージ説明

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

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

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

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

$(window).load(function(){
  $(function() {
    $("li.button:not(.is-checked)").hide();
    $("ul.button-group").click(function() {
      $("li",this).show();
      $("li",this).each(function(){
          $(this).css( "zIndex", 1 )
      });
      $("li",this).on( 'click', function() {
        $(this).parent(".button-group").find('.is-checked').removeClass('is-checked');
        $( this ).addClass('is-checked');
        $(this).parent(".button-group").children("li.button:not(.is-checked)").hide();
        $(this).parent(".button-group").children("li").off('click');
        $(this).parent(".button-group").children("li").each(function(){
            $(this).css( "zIndex", 0 );
        });
        return false;
      });
    });
  });
});

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

$(window).load(function(){
  changeDisplay();
});
window.onresize = function(){
  changeDisplay();
}
function changeSelectedButton(ele){
  // もともと選択されていたliからis-checkedクラスを外す
  $(ele).parent(".button-group").find('.is-checked').removeClass('is-checked');
  // 選択したボタンにis-checkedクラスをつける
  $(ele).addClass('is-checked');
}
function changeDisplay(){
  if($(window).width() <= 480){
    // 横幅が480以下であれば
    /*
      ここに横並び用classを外し、縦並び用classをつける処理を加える
    */
    // 非選択状態のボタンを非表示
    $("li.button:not(.is-checked)").hide();

    // ulタグにonclickイベントを付加
    $("ul.button-group").on('click', function() {
      // ulがクリックされたら
      // 非表示にしていたボタンを表示する
      $("li",this).show();

      // クリックされたulの中のli全てに処理
      $("li",this).each(function(){
        // 手前に表示するため、zIndexを変更
          $(this).css( "zIndex", 1 )
      });

      // クリックされたulの中のボタンにonclickイベントを付加
      $("li",this).on( 'click', function() {
        // ボタンがクリックされたら
        // 選択状態を変更する
        changeSelectedButton(this);

        // 非選択状態のタグを非表示にする
        $(this).parent(".button-group").children("li.button:not(.is-checked)").hide();

        // ボタンのonclickを外す
        $(this).parent(".button-group").children("li").off('click');

        // 手前に表示するための処理を打ち消す
        $(this).parent(".button-group").children("li").each(function(){
            $(this).css( "zIndex", 0 );
        });

        // ulのonclickが発火しないよう、falseを返す
        return false;
      });
    });
  }else{
    // 横幅が480より大きければ
    // 480以下のときに加えた処理を打ち消します

    // 打ち消し処理ここから
    // ボタンは全て表示する
    $("li.button").show();

    // ulのonclickは不要のため外す
    $("ul.button-group").off('click')
    // 打ち消し処理ここまで

    /*
      ここに縦並び用classを外し、横並び用classをつける処理を加える
    */

  }
}

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

$(window).load(function(){
  changeDisplay();
  $.fn.events = function(){
     return  $._data( $(this).get(0)).events
  };
});
window.onresize = function(){
  changeDisplay();
}
function changeSelectedButton(ele){
  // もともと選択されていたliからis-checkedクラスを外す
  $(ele).parent(".button-group").find('.is-checked').removeClass('is-checked');
  // 選択したボタンにis-checkedクラスをつける
  $(ele).addClass('is-checked');
}

// liが展開されているかのフラグ
var showFlag = false;
// 横幅の前回の値
var beforeWidth = -1;
function changeDisplay(){
  if(!(beforeWidth <= 480 && $(window).width() <= 480) && !(beforeWidth > 480 && $(window).width() > 480)){
    // リサイズ前と後で閾値を跨いでいれば
    if($(window).width() <= 480){
      // 横幅が480以下であれば

      // フラグ初期化
      showFlag = false;
      // 非選択状態のボタンを非表示
      $("li.button:not(.is-checked)").hide();

      // ulタグにonclickイベントを付加
      $("ul.button-group").on('click', function(event) {
        // ulがクリックされたら

        if(!showFlag){
          // ボタンが非表示の場合
          // 非表示にしていたボタンを表示する
          $("li",this).show();

          // フラグをたてる
          showFlag = true;

          // クリックされたulの中のli全てに処理
          $("li",this).each(function(){
            // 手前に表示するため、zIndexを変更
            $(this).css( "zIndex", 1 )
          });

          // クリックされたulの中のボタンにonclickイベントを付加
          $("li",this).on( 'click', function() {

            // ボタンがクリックされたら
            // 選択状態を変更する
            changeSelectedButton(this);

            // 非選択状態のタグを非表示にする
            $(this).parent(".button-group").children("li.button:not(.is-checked)").hide();

            // ボタンのonclickを外す
            $(this).parent(".button-group").children("li").off('click');

            // 手前に表示するための処理を打ち消す
            $(this).parent(".button-group").children("li").each(function(){
              $(this).css( "zIndex", 0 );
            });

            // ulのonclickが発火しないよう、falseを返す
            //return false;
          });
        }else{
          showFlag = false;
        }
      });
    }else{
      // 横幅が480より大きければ
      // 480以下のときに加えた処理を打ち消します

      // 打ち消し処理ここから
      // ボタンは全て表示する
      $("li.button").show();

      // ul、liのonclickは不要のため外す
      $("ul.button-group").off('click');
      $("li.button").off('click');

      // 打ち消し処理ここまで
    }
  }
  beforeWidth = $(window).width();
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/03/25 18:00

    ありがとうございます! 思い通りに動きました。2日いじり倒しても叶わなかったので助かりました! 申し訳ないのですが、あと2点お知恵をお借りできますでしょうか?

    (1)480pix以上にてページを開いた時(ボタンで横並びになります)、li.buttonが消えてしまっているので、480pix以上の時は初期から表示させたいです。
    (2)480pix以下の状態で、選択後(クラス名にis-checkedが追加されたブルー表示になったもの)が表示された時の下のグレーボーダーを消したいです。

    これもjavascript上でなんとかなるのでしょうか?
    お時間ある時に、ご教示いただけると幸いです。

    キャンセル

  • 2016/03/26 14:04

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

    キャンセル

  • 2016/03/26 18:22

    (1)について、回答に追記しました。
    これで解決できればいいのですが。

    蛇足ですが、
    $(window).load(/*処理*/)は(画像も含む)全てを読み込んだ後に実行するもので、
    $(function() {/*処理*/})はHTMLコードを読み込んだ後に実行するものです。
    片方だけで問題ないです。

    キャンセル

  • 2016/03/27 13:44

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

    キャンセル

  • 2016/03/28 12:43

    〆を伸ばすのは、私は構いません。

    だたし、もし込み入った内容になるようであれば、
    追加の質問を新たに見た人が理解し辛くなってしまうかも知れないので、
    新しく質問を追加した方がいいです。
    (私が答えられるとも限りませんので。。。)

    その方が、良い答えが集まりやすくなります。

    簡単なものであれば、コメントなり追記なりしちゃってください。

    キャンセル

  • 2016/04/01 00: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内とぶつかっているようで作動しないので解決したい。
    です。

    すいません、これが『込み入った内容』なのか判断つかず、追記させていただきました。問題あれば、別質問にて投稿させていただきます。
    図々しくすみません。よろしくおねがいします。

    キャンセル

  • 2016/04/03 01:21

    いろいろありがとうございました。別に質問をたてさせて頂きました(https://teratail.com/questions/31341?complete=)もしお時間あれば、アドバイス頂ければうれしいです。本当に勉強になりました。ありがとうございます。

    キャンセル

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

  • ただいまの回答率 90.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    17009questions

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

  • CSS

    6012questions

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

  • HTML5

    4179questions

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

  • CSS3

    2138questions

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