4

別のdivの可視性を切り替えるボタンを作成しようとしています...これが私が使用しているJavaScriptです

$(document).ready(function () {
    var navwidth = $('div#navigationpanel').css('max-width');

    $('div#showhidenav').click(function () {
        if ( navwidth == "0px" ) {
          $('div#navigationpanel').css('max-width', '850px');
        } 
        else if ( navwidth == "850px" ) {
          $('div#navigationpanel').css('max-width', '0px');
        }
    });
});

そして、少なくとも最初のクリックでは機能しますが、2回目にボタンをクリックすると、反対のことを行い、再びdivを表示または非表示にする必要があります。しかし、何も起こりません。

明確にするために、最初のクリックでは機能しますが、次のクリックでは機能しません

4

4 に答える 4

5

これは、(DOMReady で) 格納された値を使用していて、それを更新しないためです。したがって、条件ブロックのみが実行され、 cssメソッドは関数を受け入れ、この関数を使用できます。

$(document).ready(function () {
    $('#showhidenav').click(function () {
        $('#navigationpanel').css('max-width', function(i, m){
            return m === '850px' ? '0px' : '850px';  
        })
    });
});
于 2013-03-01T09:59:52.837 に答える
2

使用する.on()

$('div#showhidenav').on('click',function () {
    var navwidth = $('div#navigationpanel').css('max-width');
    if ( navwidth == "0px" ) {
      $('div#navigationpanel').css('max-width', '850px');
    } 
    else if ( navwidth == "850px" ) {
      $('div#navigationpanel').css('max-width', '0px');
    }
});

navwidthクリックイベント呼び出しの中に入れます。

于 2013-03-01T09:58:53.220 に答える
0
  1. セレクターは使用しないでくださいtag#id。セレクターを使用#idすると遅くなります。
  2. ターゲットオブジェクトをキャッシュする
  3. .on()イベントリスニングに使用
  4. 使用する.slideToggle()

CSS：

#navigationpanel {
    max-width: 850px;
}

JS

$(document).ready(function () {
    var $nav = $('#navigationpanel');

    $('#showhidenav').on('click', function () { $nav.slideToggle(); });
});
于 2013-03-01T10:05:22.137 に答える
0

ページの読み込み時に変数を設定していて、div を変更するときに変数を更新していません。これを修正するには、変数を使用する代わりに値を確認できます

$(document).ready(function () {
    $('div#showhidenav').click(function () {
        if ( $('div#navigationpanel').css('max-width') == "0px" ) {
          $('div#navigationpanel').css('max-width', '850px');
        } 
        else if ( $('div#navigationpanel').css('max-width') == "850px" ) {
          $('div#navigationpanel').css('max-width', '0px');
        }
    });
});

しかし、単に div を表示および非表示にしたい場合は、jQuery には組み込み関数という名前の関数があります。.toggle()

$(document).ready(function () {
    $('#showhidenav').click(function () {
          $('#navigationpanel').toggle();
    });
});

トランジションでは、デュレーションとイージングを指定できます。jqueryのドキュメントから

.toggle( 期間 [, イージング ] [, 完了 ] )

duration (default: 400)
Type: Number or String
A string or number determining how long the animation will run.

easing (default: swing)
Type: String
A string indicating which easing function to use for the transition.

complete
Type: Function()
A function to call once the animation is complete.
于 2013-03-01T10:02:20.353 に答える