Jquery 快速响应的设计让我疯狂

我完全是jQuery的初学者，我在设计一个快速响应的网站时遇到了很多麻烦。他们的桌面站点上有两个水平菜单，当屏幕大小达到657px或更小时，我需要水平菜单变成下拉菜单

我原以为一切正常，直到我意识到当屏幕尺寸小于657px时，我打开和关闭（切换？）下拉菜单，它也会打开和关闭更大的尺寸，这很有道理，但我不知道如何阻止它这样做，所以基本上我需要的是出现在657px和更小尺寸的下拉菜单只切换，而不是水平菜单

我尝试在>=657处向水平菜单添加一个.show，以确保它始终显示，但这只会导致下拉菜单的内容在按下之前显示出来。我认为这一定是不可能的，直到我看到许多网站都做得很完美（例如bostonglobe.com）

我认为这个问题非常相似，但我真的不理解解决方案：

我的HTML（这是一个阿拉伯语网站）

---

非常感谢您的帮助……谢谢

您有多个元素具有相同的ID

dd mainnav

。这是不允许的。改为使用多个类：

<li class="leaf7 dd-mainnav">

但让JS保持原样可能更容易，只需将新样式添加到移动样式表中即可：

#categories-dd, #categories-dd.active-main {
    display: block; /* or whatever */
}    

---

首先，为什么有这么多document.ready函数…为什么不只是父函数，所有的东西都在其中？您不需要嵌套的准备工作。一切都准备好了。此外，您不需要两个onclick函数。在你的选择器中，说

$('#categories-dd, #countries-dd').on

此外，我建议使用父选择器。例如，如果#类别和#国家/地区的父选择器在本解释中为#daddy

$('#daddy').on('click','#categories-dd, #countries-dd',function(){
    // code goes here  
});

此外，您有许多相同的id。id是唯一的标识符。如果需要，请使用多个类，但每个项的ID应该是唯一的

e、 g

---

您不需要嵌套那些document.ready函数。触发该事件时，将执行document.ready中定义的所有函数。将所有代码放在一个文档中会更简洁。ready函数。同一元素上的多个单击事件也可以组合成一个事件。感谢您的回复，，，我应用了您对id和类的建议…问题是，下拉菜单在移动大小下工作正常，但当我展开浏览器时，它的效果会被带到更大的尺寸中。i、 e打开和关闭手机尺寸上的下拉菜单并将查看端口扩展到657以上时，水平菜单已消失，如果我随后返回手机尺寸并打开下拉菜单，然后扩展到657以上，则水平菜单再次出现。我将#类别dd更改为block，但仍然无法工作。我添加此选项是为了更容易理解问题。感谢您的帮助，我采纳了您的建议并清理了jQuery代码…不幸的是，在html和“$”（“#menuinologerwant”）.toggle（）中添加了一个父选择器jQuery并没有阻止这个问题不，它不会。您应该使用.toggle（）（它将切换给定元素是隐藏还是显示。）或者您可以使用.hide（）和.show（），但是.toggle（）应该可以正常工作。

#categories-dd, #categories-dd.active-main {
    display: block; /* or whatever */
}    

$('#categories-dd, #countries-dd').on

$('#daddy').on('click','#categories-dd, #countries-dd',function(){
    // code goes here  
});

<a class="this that theother someotherclass howevermanyclasses" id="uniquetome">see?</a>

     $('#menuINoLongerWant').toggle();