Jquery单击show hide按钮使用if for css

Question

我一直试图制作一个按钮来切换另一个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');
        }
    });
});

并且它确实有效,在第一次点击的leas,但第二次我点击按钮,它应该做相反,以太再次显示或隐藏div.但没有任何反应.

所以要清楚,它适用于第一次点击,但不适用于任何下一次点击

Answer 1

那是因为你正在使用一个存储值(在DOMReady上)并且你没有更新它,因此只执行条件块, css方法接受一个函数,你可以使用这个函数:

$(document).ready(function () {
    $('#showhidenav').click(function () {
        $('#navigationpanel').css('max-width', function(i, m){
            return m === '850px' ? '0px' : '850px';  
        })
    });
});