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';  
        })
    });
});

Answer 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放在click事件调用中。

Answer 3

您正在设置页面加载时的变量，而不是在修改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 [，easing] [，complete]）

 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. 

Answer 4

1. 不要使用tag#id #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(); });
});