的jQuery/JavaScript的显示/隐藏事件

Question

我只是钻研的JavaScript的世界，有关于一个难题，我目前遇到的查询....

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

我编码的JavaScript做的工作，但我知道这是不对的，而且我不知怎么省了它！我知道这一点，因为'reveal'和'hide'元素的脚本的计时值相互影响......使得设置动画的时间有点不可预测，无法准确设置。

菜单按钮，显示和隐藏导航菜单具有附接至其以下类：

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

我相信这个问题是因为类的分配而产生的仍然是两个“正常”和“点击”菜单按钮的状态。

我想我需要做somethng这样的：

$(document).ready(function(){ 

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

}); 

然而，这是行不通的。

如果任何人都可以指示我如何更好地编码的方向，那么将不胜感激。

Answer 1

如果我理解正确，你想切换类。你可以试试http://api.jquery.com/toggleclass/。

让我知道它是否适合你！

感谢

卡迈勒

Answer 2

$(function() { 
    $('body').on('click', '#menu-toggle', function() { 
     $('.site-content').toggle(300) 
    }) 
}) 

上面的代码将导致.site-content div来淡入和淡出当你点击#menu-toggle。

在jQuery函数$()内包装函数文字只是$(document).ready()的简写。你可以用任何方式写它，它的工作原理是一样的。我喜欢更简洁的语法。

jQuery中的.toggle()方法只是简单地切换元素的可见性。您不需要更改类或直接操作不透明度或可视性来执行此操作。 jQuery检测它是否可见并负责其余部分。您可以添加持续时间以获得淡入淡出效果。

我将绑定委托给body标签，因为我不知道您的HTML结构。如果.site-content有一个包装div，可以委托给它（这个想法是将事件委托给事件目标更有效，而不是让事件直到文档）。

享受！

更新来自OP：

感谢reply.This确实切换的内容，但我 使用的知名度和透明度属性，因为我不想让 布局改变时在.site内容是hidden.When能见度 切换含量显着完全自败

新的解决方案：

我不知道你是什么样的布局/ CSS的样子，但我认为这是你想要的...

添加以下的CSS样式为.site-content：

visibility: visible; 

现在添加下面的CSS规则：

.site-content.hidden { 
    visibility: hidden; 
} 

现在的JS代码更改为以下：

$(function() { 
    $('body').on('click', '#menu-toggle', function() { 
     $('.site-content').toggleClass('hidden') 
    }) 
}) 

样式visibility: hidden意味着您将不再看到该元素，但它仍然是文档流的一部分。换句话说，它仍然占用布局空间。此更改不会影响其余布局。

现在，当你点击#menu-toggle它会添加或删除隐藏的类。