Jquery 单击显示隐藏按钮，使用 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');
        }
    });
});

它确实有效，至少在第一次单击时是这样，但是当我第二次单击该按钮时，它应该执行相反的操作，以再次显示或隐藏 div。但什么也没发生。

所以要明确的是，它适用于第一次点击，但不适用于任何下一次点击

Answer 1

这是因为您使用的是存储值(在 DOMReady 上)并且没有更新它，因此仅执行条件 block ， css 方法接受一个函数，您可以使用此函数:

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