javascript - jQuery/JavaScript 在切换按钮查询上显示/隐藏事件

Question

我正在深入研究 JavaScript 的世界，并对我当前遇到的难题有疑问......

我有一个菜单按钮，可以显示和隐藏我正在处理的网站上的导航菜单。对于这个菜单按钮，我附加了一些 JavaScript，以便在导航栏显示时“隐藏”主网站内容并“显示” ' 导航栏随后再次关闭时的主要内容。

我编写的 JavaScript 可以完成这项工作，但我知道这是不对的，而且不知何故我侥幸成功了!我知道这一点是因为“显示”和“隐藏”元素的脚本计时值彼此交互......使得设置动画的计时有些难以预测以准确设置。

显示和隐藏导航菜单的菜单按钮附加了以下类:

.menu-toggle

当单击它以显示导航栏时，会添加一个附加类，即:

.toggled-on

因此，在单击状态下，类是:

'.menu-toggle toggled-on'

下面是控制网站内容隐藏和显示的JS:

$(document).on('click', '#menu-toggle', function() {
  $('.site-content').animate({opacity:1, visibility:'visible'}, 100);
});

$(document).on('click', '.toggled-on', function() {
  $('.site-content').animate({opacity:0, visibility:'visible'},        300);
});

我认为出现这个问题是因为类的分配仍然处于菜单按钮的“正常”和“单击”状态。

我想我需要做这样的事情:

    $(document).ready(function(){

    if ( $('#menu-toggle').hasClass('toggled-on') ) {
    $('#menu-toggle').addClass('nav-on');
  } else {
    $('#menu-toggle').addClass('nav-off');
  }

});

但这不起作用。

如果有人能指出我如何更好地编码的方向，那么我将不胜感激。

Answer 1

如果我理解正确，你想切换类(class)。

你能试试http://api.jquery.com/toggleclass/ .

请告诉我它是否适合您!

谢谢

卡迈勒