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

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

ただいまの
回答率

90.51%

  • JavaScript

    20372questions

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

  • jQuery

    8147questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

jQueryの処理が思うように実行されない

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,160

Kenken.max

score 17

プログラミング初心者です。jQueryの処理が思うように実行されず困っております。

現状
1レスポンシブ時(768以下)にのみハンバーガーメニューアイコンがでるように記述した(media queryで記述)

2.fadeToggleでsidebarを自由に開閉できるよう記述した。

3.しかし、レスポンシブ時(768)にfadeToggleを押してsidebarを消すと、もとのPC画面に戻した時sidebarが消えた状態になる。(PCサイズ時にdisplay:none状態が引き継がれる)

PCの状態では、常にsidebarは表示されるようにしたい。

$(function() {
$(".menu-trigger").click(function(){

// クリックするとメニューが表示・非表示
$(".sidebar").fadeToggle();
});


    var w = window.width();

    var x = 768;

  //もしwindowが768よりおおきい時
  if (w > x) {
//sidebarを常に表示したい・・・
    }

});

もし分かる方がいらっしゃいましたら、教えていただけると幸いです。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • ogaaaan

    2016/03/14 13:12

    タイトルのカッコは何か意味がありますか?

    キャンセル

  • Kenken.max

    2016/03/14 15:29

    ご指摘ありがとうございます。間違えてつけてしまっていたので削除致しました。

    キャンセル

  • ogaaaan

    2016/03/14 15:32

    あざっす!

    キャンセル

回答 2

checkベストアンサー

+4

javascriptを使わず、CSSで

@media screen and (min-width: 769px) {
  .sidebar {
    display: block!important;
  }
}


のようにしておけばいいのではないかと思いました。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/03/14 16:51

    CSS3のメディアクエリだけで動作を済ませたほうが圧倒的に軽いのでこちらを支持.

    キャンセル

  • 2016/03/15 21:55

    アドバイスありがとうございます。確かにimportantで優先して処理を実行するやり方もありですね。ご回答いただき誠にありがとうございます。^^

    キャンセル

+2

リサイズイベントに設定する必要があると思います。
現状のコードでは、リサイズ時に対応していません(ロード時に一度だけ処理が行われるのみ)

$(".menu-trigger").click(function(){
  // クリックするとメニューが表示・非表示
  $(".sidebar").fadeToggle();
});

$(window).on('resize', funxtion(){

    var w = window.width();

    var x = 768;

  //もしwindowが768よりおおきい時
  if (w > x) {
  //sidebarを常に表示したい・・・
  }
});

var determineSidebar

また、リサイズ時の処理ですが、ロード時にも一度行う必要があるかと思いますので、そちらも合わせて行えるように関数化すると良いです(同じ処理を二度書かなくて良くなる)

// 関数の設定
var determineSidebar = function(){
  var w = window.width();

  var x = 768;

  //もしwindowが768よりおおきい時
  if (w > x) {
  //sidebarを常に表示したい・・・
  }
};

// ロード時に一度実行
determineSidebar();

$(window).on('resize', funxtion(){
  // リサイズ時に再度実行
  determineSidebar();
};

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/03/14 12:24 編集

    yamato_hikawa様
    前回に引き続き、今回もご回答いただき誠にありがとうございます。アドバイスをもとにやってみましたができませんでした😓
    $(function(){

    $(".menu-trigger").click(function(){
    // クリックするとメニューが表示・非表示
    $(".sidebar").fadeToggle();
    });
    // 関数の設定
    var detemineSidebar = function(){
    var w = window.width();

    var x = 768;

    //もしwindowが768よりおおきい時
    if (w > x) {
    //sidebarを常に表示したい・・・

    $(".sidebar").show();
    }
    //ロード時に一度実行
    detemineSidebar();

    $(window).on('resize', function(){
    // リサイズ時に再度実行
    detemineSidebar();

    });

    };


    });

    キャンセル

  • 2016/03/14 12:42 編集

    開発の作業の話になりますが、
    1. 関数が実行されているのか
    2. if文は想定した動作をしているか
    3. if文内の処理は正しく実行されているか。実行されているにも関わらず、表示されないのはなぜか

    というのを切り分けつつ、検証をするしかないです。
    コンソールを仕込んだり、if文を一旦取り払った上でサイドバーの表示処理をさせてみてうまくいくかどうかを確かめたりです。
    そうして原因がわかった所で対応すると良いと思います。

    show()が実行されているのに、表示が変わっていないのかどうかをdevツール上で確認した方がいいと思います。

    キャンセル

  • 2016/03/14 13:13 編集

    Re:Kenken.max さん
    「var detemineSidebar = function(){」の範囲がちょとおかしくないですか?
    これだと「//ロード時に一度実行」の次の行の「detemineSidebar();」も「$(window).on('resize', function(){」の行も実行されませんが。。。

    キャンセル

  • 2016/03/15 21:52

    yamato_hikawa様、tkturbo様

    皆様のアドバイスをもとにトライした結果、処理を実行することができました。ありがとうございました!^^

    $(function() {

    $(".menu-trigger").click(function() {
    // クリックするとメニューが表示・非表示
    $(".sidebar").fadeToggle();
    });

    // .関数の設定
    var detemineSidebar = function() {
    //もしwindowが768よりおおきい時
    if ($(window).width() > 768) {
    //sidebarを常に表示したい・・・
    $(".sidebar").removeAttr('style');
    //$(".sidebar").show();
    }
    };
    //ロード時に一度実行
    detemineSidebar();
    $(window).on('resize',detemineSidebar);
    });
    // 全体の閉じ

    キャンセル

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

  • JavaScript

    20372questions

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

  • jQuery

    8147questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。