Jquery使用if for css单击显示隐藏按钮

Posted 2023-02-25

【中文标题】Jquery使用if for css单击显示隐藏按钮

【英文标题】：Jquery Click show hide button using if for css

【发布时间】：2013-03-01 09:57:08

【问题描述】：

我一直在尝试制作一个按钮来切换另一个 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。但是什么也没发生。

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

【问题讨论】：

为什么不直接使用 jquery .toggle()？

@JacobTomlinson 因为我需要滑动过渡

.toggle() 有过渡吗？

【参考方案1】：

那是因为您使用的是存储值（在 DOMReady 上）并且您没有更新它，因此仅执行条件块，css 方法接受一个函数，您可以使用此函数：

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

【参考方案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 放入点击事件调用中。

【参考方案3】：

不要使用tag#id 选择器，只使用#id，前者会更慢 缓存您的目标对象 使用.on() 监听事件 使用.slideToggle()

CSS：

#navigationpanel 
    max-width: 850px;

JS

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

    $('#showhidenav').on('click', function ()  $nav.slideToggle(); );
);

【参考方案4】：

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

.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.