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

它确实有效，至少在第一次点击时，但第二次点击按钮时，它应该做相反的事情，再次显示或隐藏 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

您在页面加载时设置变量，而不是在修改 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 回答
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 回答