切换让我在响应式设计中变得疯狂

Question

我是一名jQuery初学者，我在设计一个响应式网站时遇到了很多麻烦。他们是桌面网站上的2个水平菜单，当屏幕尺寸达到657px并且更少时，我需要水平菜单成为下拉菜单。

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

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

我认为这个问题是非常相似的，但我真的不明白的解决方案：Jquery toggle on responsive site

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

 <button id="categories-dd" class="unactive-main"></button> 
    <nav id="main-navigation"> 
     <ul id="menu"> 
      <li class="leaf" id="dd-mainnav"> 
       <a href="Main.html">الرئيسية</a> 
      </li> 
      <li class="leaf1" id="dd-mainnav"> 
       <a href="politics-html.html">سياسة</a> 
      </li> 
      <li class="leaf2" id="dd-mainnav"> 
       <a href="sports-html.html">رياضة</a> 
      </li> 
      <li class="leaf3" id="dd-mainnav"> 
       <a href="business-html.html">أعمال</a> 
      </li> 
      <li class="leaf4" id="dd-mainnav"> 
       <a href="culture-html.html">ثقافة</a> 
      </li> 
      <li class="leaf5" id="dd-mainnav"> 
       <a href="opinion-html.html">رأي</a> 
      </li> 
      <li class="leaf6" id="dd-mainnav"> 
       <a href="tech-html.html">تكنلوجيا</a> 
      </li> 
      <li class="leaf7" id="dd-mainnav"> 
       <a href="lifestyle-html.html">نمط الحياة</a> 
      </li> 
      <li class="leaf8" id="dd-mainnav"> 
       <a href="multimedia-html.html">فيديو</a> 
      </li> 
     </ul> 
    </nav> 
    <!--END: MAIN NAVIGATION--> 

    <!--SECONDARY NAVIGATION--> 
    <button id="countries-dd" class="unactive-sec">البلد</button> 
    <nav id="secondary-navigation"> 
     <ul id="menu2"> 
      <li class="subleaf"> 
       <a href="arab-news-html.html">الإمارات</a> 
      </li> 
      <li class="subleaf"> 
       <a href="arab-news-html.html">عمان</a> 
      </li> 
      <li class="subleaf"> 
       <a href="arab-news-html.html">اليمن</a> 
      </li> 
      <li class="subleaf"> 
       <a href="arab-news-html.html">السعودية</a> 
      </li> 
      <li class="subleaf"> 
       <a href="arab-news-html.html">البحرين</a> 
      </li> 
      <li class="subleaf"> 
       <a href="arab-news-html.html">قطر</a> 
      </li> 
      <li class="subleaf"> 
       <a href="khalij-html.html">الكويت</a> 
      </li> 
      <li class="subleaf"> 
       <a href="iraq-html.html">العراق</a> 
      </li> 
      <li class="subleaf"> 
       <a href="syria-html.html">سوريا</a> 
      </li> 
      <li class="subleaf"> 
       <a href="lebanon-html.html">لبنان</a> 
      </li> 
      <li class="subleaf"> 
       <a href="jordan-html.html">الأردن</a> 
      </li> 
      <li class="subleaf"> 
       <a href="palestine-html.html">فلسطين</a> 
      </li> 
      <li class="subleaf"> 
       <a href="egypt-html.html">مصر</a> 
      </li> 
      <li class="subleaf"> 
       <a href="sudan-html.html">السودان</a> 
      </li> 
      <li class="subleaf"> 
       <a href="libya-html.html">ليبيا</a> 
      </li> 
      <li class="subleaf"> 
       <a href="tunisia-html.html">تونس</a> 
      </li> 
      <li class="subleaf"> 
       <a href="algeria-html.html">الجزائر</a> 
      </li> 
      <li class="subleaf"> 
       <a href="morocco-html.html">المغرب</a> 
      </li> 
      <li class="subleaf"> 
       <a href="mauritania-html.html">موريتانيا</a> 
      </li> 
     </ul> 
    </nav> 
    <!--END: SECONDARY NAVIGATION--> 

我的jQuery（请不要笑） ：

$(document).ready(function(){ 
    $('#countries-dd,#categories-dd').on('click', function(){ 
     $(this).next().toggle(); 
     }); 

    $(document).ready(function(){ 
     $('#categories-dd').on('click',function(){ 
     $('#categories-dd').toggleClass('active-main'); 
     }); 
    }); 

    $(document).ready(function(){ 
     $("#countries-dd").on('click',function(){ 
     $("#countries-dd").toggleClass("active-sec"); 
     }); 
    }); 
    }); 


    $(window).resize(function() { 
     if($(window).width() > 657) 
     { 
      $('#main-navigation, #secondary-navigation').show(); 
     } 

    }); 

任何帮助非常感谢....谢谢！

Answer 1

您有几个元素具有相同的ID dd-mainnav。这是不允许的。使用多个类来代替：

<li class="leaf7 dd-mainnav"> 

一旦你这样做（并相应地重写你的JS和CSS），添加一个用于测试的窗口的宽度click处理器内部：

$('#categories-dd').on('click',function(){ 
    if ($(window).width > 657){ 
     $(this).toggleClass('active-main'); 
    } 
}); 

但它可能是更容易留下您的JS原样，只是增加新的样式到您的手机样式：

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

Answer 2

首先，为什么有这么多的document.ready功能......为什么不只是父母，与它的一切？你不需要嵌套的准备。一切准备就绪。另外，你不需要两个onclick函数。在你的选择器中，说

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

另外，我建议使用父选择器。例如，如果#categories和#countries的家长选择是 - 对于这种解释的目的 - #daddy .....

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

而且，你有相同ID的不少。 ID是一个唯一的标识符。如果需要使用多个类，但ID应该是每个项目的UNIQUE。

例如

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

我建议在你的功能，请执行下列操作：

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