Question

我正在深入研究JavaScript的世界，并询问我目前遇到的难题......

我有一个菜单按钮，显示并隐藏我正在处理的网站上的导航菜单。为了这个菜单按钮，我附上了一些JavaScript来隐藏＆＃39;导航栏显示时的主要网站内容并显示＆＃39;导航栏随后再次关闭时的主要内容。

我编写的JavaScript完成了这项工作，但我知道它不对，而且不知何故我把它搞砸了！我知道这是因为脚本的时间值对于＆＃39;显示＆＃39;并且隐藏＆＃39;元素相互作用...使动画的时间设置有些不可预测，无法准确设置。

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

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

我认为问题的出现是因为课程的分配仍然存在于正常情况下。并点击了＆＃39;菜单按钮的状态。

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

    $(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时，上述代码会导致#menu-toggle div淡入淡出。

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

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

我将绑定委托给body标签，因为我不知道HTML的结构。如果.site-content有一个包装器div，你可以委托给它。（我们的想法是，更接近事件目标而不是将事件冒泡到文档中更有效率。）

享受！

来自OP的更新：

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

新解决方案：

我不知道你的布局/ 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时，它会添加或删除隐藏的类。

切换按钮查询

2 个答案: