Question

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

我认为我已经完成了所有工作，直到我意识到当屏幕尺寸小于657像素并且我打开和关闭（切换？）时，它会打开并关闭更大的尺寸，这很有道理但是我不知道如何阻止它这样做，所以我基本上需要的是，尺寸为657px且更少的下拉菜单只能切换，而不是水平菜单。

我尝试在＆gt; = 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。

e.g。

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

我建议你在on函数中执行以下操作：

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

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

2 个答案: