jQuery/javascript show/hide事件在切换按钮查询上

Question

我只是在深入研究JavaScript的世界，并且对我目前正在遇到的难题有一个查询....

我有一个菜单按钮，该按钮揭示并隐藏了我正在工作的网站上的导航菜单。在此菜单按钮上，我附上了一些JavaScript，以"隐藏"当显示NAV栏并显示" Show"时"隐藏"主站点内容'随后再次关闭导航栏时的主要内容。

我编码的JavaScript完成了这项工作，但是我知道这是不对的，我以某种方式使它流传了！我之所以知道这一点，是因为"揭示"one_answers"隐藏"元素相互交互的脚本的时序值相互交互...使设置动画的时机无法准确设置。

显示和隐藏导航菜单的菜单按钮附有以下类：

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

我相信，由于类的分配仍处于菜单按钮的"正常"one_answers"单击"状态。

我认为我需要这样做：

    $(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/。

让我知道它是否适合您！

谢谢

kamal

Answer 2

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

上面的代码将导致.site-content DIV在单击#menu-toggle时淡出并淡出。

将函数包装在jQuery函数$()内部的字面形式只是$(document).ready()的速记。您可以以任何方式编写它，并且可以使用相同的工作。我喜欢更简短的语法。

jQuery中的.toggle()方法只需切换元素的可见性即可。您无需更改课程或直接操纵不透明度或可见性就可以做到这一点。jQuery检测到它是否可见并照顾其余的。您可以添加持续时间以获得淡出效果。

我不知道您的HTML的结构，将绑定到身体标签。如果.site-content有包装师，则可以委派。（这个想法是，更贴近事件目标，而不是使事件泡沫一直升至文档）。

）。

享受！

从OP：

更新

感谢您的答复。这确实确实切换了内容，但是我是 使用可见性和不透明度属性，因为我不想要 当隐藏了.Lote-content时，要更改的布局。可见性是 切换内容显然完全消失

新解决方案：

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

将以下内容添加到.site-content的CSS样式中：

visibility: visible;

现在添加以下CSS规则：

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

现在将JS代码更改为以下内容：

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

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

现在，当您单击#menu-toggle时，它将添加或删除隐藏的类。