显示以前使用jQuery隐藏的导航I；jQuery版本？

我试图创建一个简单的网站，以一定的分辨率变化。通常，结构是

标题

和

导航

在

文章

和

旁边

，它们彼此相邻

在CSS中，有两个@media查询：一个用于站点宽度小于530px时的查询，另一个用于站点宽度大于530px时的查询

当站点宽度小于530px时，

侧边

和

标题

元素受

显示影响：无

，站点上只剩下

导航

和

文章

发生这种情况时，

文章

中会出现一个切换按钮

#侧菜单

，该按钮隐藏/显示

导航

，并将文章移到上面，其jQuery如下：

$('#sidemenu').toggle(
function () {
  $('article').css('marginLeft', '0')
  $('nav').hide()
}, function () {
  $('article').css('marginLeft', '20%')
  $('nav').show()
})

这是可行的，但当分辨率变回更宽时（我通过改变浏览器的窗口大小来测试这一点），要么

文章

仍受

marginLeft

的影响（如果我留下显示

nav

的开关），要么

nav

被

$（'nav'）.hide（）

（如果我将

nav

隐藏）. 它通过刷新页面得到修复

我尝试添加以下jQuery：

if ($(window).width() > 530 {
    $('nav').show()
    $('article').css('marginLeft', '0')
}

但添加它只会导致上述切换不起作用。我还试图根据Side的可见性显示

导航

，因为它的分辨率更高，但这导致了同样的问题

我迷路了，我该怎么解决

另外，我还有两个问题。这是我第一次使用jQuery，我成功地使用了它

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

当我使用版本1.11.3时，jQuery不起作用。使用哪个版本是正确的？为什么它在1.5.2中有效，而在1.11.3中无效

第二个问题：当我移动html末尾的

时（就在

前面），它才开始工作，为什么

编辑：通过稍微修改CSS来“修复”marginLeft问题，因此jQuery的边距更改不会影响更广泛的站点。但隐藏的导航仍然存在

Edit2：更改了我的jQuery，使其与较新版本兼容（去掉了切换）。但隐藏的导航仍然存在

---

Edit3:根据建议添加了一些分号。Jsfiddle：jQuery 1.9中删除了

切换事件。这就是为什么代码在使用jQuery1.5时有效，而在使用jQuery1.11时无效。见：

您可以尝试以下操作，而不是使用
切换
：

Javascript

$('#sidemenu').on('click', function() {
    if ($('nav').hasClass('hidden')) {
        $('nav').removeClass('hidden');
        $('article').addClass('indented');
    } else {
        $('nav').addClass('hidden');
        $('article').removeClass('indented');
    }
});

CSS

nav.hidden {
  display: none;
}
article.indented {
  margin-left: 20%;
}

此外，您应该将Javascript包装在一个文档就绪块中，如下所示：

jQuery(document).ready(function($){
  // Your code here
});

这将延迟代码的执行，直到DOM完全加载（请参阅：）

如果您使用的是vanilla Javascript，那么您将使用以下内容，这可以实现相同的功能：

window.onload = function(){
  // Your code here
};

由于您尚未执行此操作，因此有必要将
元素移动到
的末尾。您添加的
if
条件可能会破坏脚本，因为它是无效语法。您缺少一个右括号。哦，我没注意到，但它没有改变任何事情。添加它仍然会导致第一个脚本无法工作。您能在JSFIDLE上向我们说明什么是错误的吗？希望使用HTML重新创建。好的，在这个jsfiddle中，您可以看到这个问题。如果我隐藏导航栏，然后放大站点，导航将保持隐藏状态。虽然不能解决您的问题，但您应该习惯用分号（；）终止JavaScript命令。JavaScript在自动终止行方面有一些奇怪之处…我更改了切换，并更新了我的帖子，昨天就显示了这个问题。我遇到的真正问题是，如果我隐藏导航，然后使页面变宽，导航仍然隐藏。。。