0

私の名前はアダムです。StackExchangeは初めてですが、このサイトは過去の多くの問題に非常に役立ちました。

jquery関数に問題があり、ここでアドバイスを求めたいと思いました。私はhtmlとcss、少しのphpについてかなりまともな知識を持っていますが、事実上javascriptやjqueryについては何も知りません。

私は現在、phpが許可されていないため、特定のhtmlタグを使用して動的コンテンツを有効にするサイトで作業しています。しかし、Javascriptはそうなので、私はそれを探していました。アカウント内からしかデザインをプレビューできないため、ここに示す実例はありませんが、以下のスクリプトを貼り付けました。

レスポンシブデザインを作成したかったのですが、モバイルに至るまで流動的です。最近のデザイントレンドに従って、画面の横から「スライドイン/スライドアウト」スタイルのメニューを作成したいと思いました（Facebook Mobile、Dolphin Browserを考えてみてください）。いくつかの例を見た後、CSSを変更する関数を作成し、メインのdiv＃siteテンプレートを右に移動して、左のメニューを表示しました。すべてが大丈夫だったし、それはうまくいった。

今日は、左側に1つ、右側に1つ、合計2つのスライドアウトメニューがあると便利だと思いました。

うまくいくと思っていたものを関数に追加しました。

メインサイト（div＃site）を左にスライドして右側のメニューを表示するボタン（クラス.open-sidebar-right）があります。次に、同じボタンまたはdiv＃siteをクリックして、メニューを閉じます。

左ボタンをクリックすると問題が発生します。左側のメニューは完全に開閉しますが、右側のボタンはまったく役に立たず、まったく機能しません。

値の異なる両方のメニューに1つの変数を使用して、2つの別個の関数として記述しようとしましたが、左ボタンを使用すると、常に右ボタンが使用できなくなります。

先に述べたように、私はJavascriptやjQueryの知識がほとんどないので、おそらくコーディングが不十分ですが、なぜこれが機能しないのか理解できません。

誰かアドバイスや提案があれば、本当にありがたいです。

よろしくお願いします、アダム。

jQuery(function () {
var sidebarleft;
var sidebarright;

// ------------
// Left sidebar

jQuery(".open-sidebar-left").click(function () {
    if (!sidebarleft) {
        jQuery("#site").css({
            'left':'50%',
        });
        sidebarleft = true;
        return false;
    } else {
        jQuery("#site").css({
            'left':'0%',
        });
        sidebarleft = false;
        return false;
    }
});

// ------------
// Right sidebar

jQuery(".open-sidebar-right").click(function () {
    if (!sidebarright) {
        jQuery("#site").css({
            'right':'50%',
        });
        sidebarright = true;
        return false;
    } else {
        jQuery("#site").css({
           'right':'0%',
        });
        sidebarright = false;
        return false;
    }
});

// ----------------------------------
// Close sidebars by clicking on site

jQuery("#site").click(function () {
    if (sidebarleft) {
        jQuery("#site").css({
            'left':'0%',
        });
        sidebarleft = false;
        return false;
    } else if (sidebarright) {
        jQuery("#site").css({
            'right':'0%',
        });
        sidebarright = false;
        return false;
    }
});
});
4

2 に答える 2

2

アダム、

@zgoodはあなたのコードは良いと言っていますが、私はいくつかのエラーを指摘し、あなたの問題を解決するかもしれないいくつかの提案をするだろうと思いました：

$(document).ready(function(){ // in the jQuery doc, they don't suggest you use $(<func>)
    var sidebarleft = false, // sidebarleft and sidebarright has to be equal to something
    sidebarright = false; // either true or false (I would use false since you're testing false in your conditional

    $(".open-sidebar-left").click(function() {
        if( !sidebarleft ) {
             $("#site").css({
                 left: '50%' // remove the comma, and do not put quotes around single-word identifiers
             });
             sidebarleft = true; 
             return false;
        } else {
           $("#site").css({
              left: '0'
           });
           sidebarleft = false;
           return false;
        }
    });

    $(".open-sidebar-right").click(function() {
        if( !sidebarright ) {
             $("#site").css({
                 right: '50%' // remove the comma, and do not put quotes around single-word identifiers
             });
             sidebarright = true; 
             return false;
        } else {
           $("#site").css({
              right: '0'
           });
           sidebarright = false;
           return false;
        }
    });
});

したがって、上記のコードのコメントでわかるように、

  1. jQueryはそれが有効であると言っていますが、使用することはお勧めしません。要素をjQuery(function(){});クエリし、document準備ができているかどうかをテストしてから、関数を呼び出します。
  2. sidebarrightそして（trueでもfalseでもない）ので、ifステートメントは意味sidebarleftがundefinedありません。
  3. 宣言ではcss()、最後の要素にコンマを入れないでください。複数の要素がある場合にのみコンマを入れてください。

animate()また、の代わりにを使用することをお勧めしcss()ます。また、（Chromeを使用している場合は）インスペクターを使用し、（Firefoxを使用している場合は）FireBugを使用してJavaScriptコードのエラーをテストします。お役に立てれば。

于 2013-02-21T20:15:23.710 に答える
0

あなたのコードは正しいです、問題はCSSの問題のようです。

左ボタンをクリックすると、クリックイベントが次のように#sitedivにインラインスタイルを追加します。

<div id="site" style="left:50%;">

次に、右ボタンをクリックすると、コードは次のように新しいスタイルを#sitedivに追加します。

<div id="site" style="left: 0%; right: 50%;">

問題がわかりますか？

これを修正するには、2つのことを行う必要があります。CSSを投稿しなかったので、どのようにスタイルを設定したかはわかりませんが、スタイル宣言から任意のスタイルまたはスタイルを#site削除してください。leftright#site

次に、jQueryコードを更新して、次のような以前のインラインスタイルを削除します。

 // ------------
// Left sidebar

jQuery(".open-sidebar-left").click(function () {
    jQuery("#site").removeAttr('style');
    if (!sidebarleft) {
        jQuery("#site").css({
            'left':'50%',
        });
        sidebarleft = true;
        return false;
    } else {
        jQuery("#site").css({
            'left':'0%',
        });
        sidebarleft = false;
        return false;
    }
});

と

jQuery(".open-sidebar-right").click(function () {
    jQuery("#site").removeAttr('style');
    if (!sidebarright) {
        jQuery("#site").css({
            'right':'50%',
        });
        sidebarright = true;
        return false;
    } else {
        jQuery("#site").css({
           'right':'0%',
        });
        sidebarright = false;
        return false;
    }
});

removeAttrここにあなたの友達です。また、css値を変更するだけでなく、アニメーションを使用することもできますが、それはあなたの呼び出しです

jQuery .animate（）

于 2013-02-21T20:07:24.867 に答える