切換讓我在響應式設計中變得瘋狂

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();