0

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

我以为我一切正常，直到我意识到当屏幕尺寸小于 657 像素并且我打开和关闭（切换？）下拉菜单也会以更大的尺寸打开和关闭，这很有意义，但我没有知道如何阻止它这样做，所以基本上我需要的是出现在 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();
        }

    });

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

4

2 回答 2

0

您有几个具有相同 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 */
}
于 2013-02-08T19:04:14.070 回答
0

首先，为什么有这么多的 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 应该是唯一的。

例如

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

我建议在您的 on 功能中，执行以下操作：

     $('#menuINoLongerWant').toggle();
于 2013-02-08T19:08:33.653 回答