0

私はjQueryの初心者であり、デザインしているレスポンシブWebサイトで多くの問題を抱えています。それらはデスクトップサイトの2つの水平メニューです。画面サイズが657px以下になると、水平メニューをドロップダウンメニューにする必要があります。

画面サイズが657px未満で、ドロップダウンを開閉（切り替え？）すると、大きいサイズでも開閉することに気付くまで、すべてが機能していると思いました。これは理にかなっていますが、私にはありません。それをやめる方法を考えてください。基本的に私が必要としているのは、657px以下のサイズで表示されるドロップダウンがトグルするだけで、水平メニューもトグルしないことです。

> = 657の水平メニューに.showを追加して、常に表示されるようにしましたが、ドロップダウンメニューの内容が押される前に表示されていました。それを完璧に行っている多くのウェブサイト（たとえばbostonglobe.com）を見るまで、それは不可能だと思いました。

この質問は非常に似ていると思いますが、私は本当に解決策を理解していませんでした：レスポンシブサイトでのJqueryトグル

私のHTML（アラビア語のWebサイトです）

        <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

まず、なぜこんなに多くの document.ready 関数が...なぜ親だけでなく、すべてが含まれているのでしょうか? ネストされた準備は必要ありません。準備ができているものはすべて準備ができています。また、2 つの 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>

on 関数で次のことをお勧めします。

     $('#menuINoLongerWant').toggle();
于 2013-02-08T19:08:33.653 に答える
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 に答える