javascript - ドロップダウン メニューを含む完全な長さのナビゲーション メニューを作成する方法

Question

ネストされたメニューを方程式に導入するまでは、このスクリプトがうまく機能することがわかりました。 脚本

ネストされたメニューにスクリプトが適用されないようにするにはどうすればよいですか? ネストされたメニューにクラスまたは ID を与え、それをスクリプトから除外する方法はありますか?

Answer 1

あなたの質問を正しく理解できたら、クラスをトップ レベル メニューに追加して、そうでないものをすべて除外できます: HTML:

<ul class="menu">
    <li class="top-level">About Us</li>
    <li class="top-level">Our Products</li>
    <li class="top-level">FAQs</li>
    <li class="top-level">Contact</li>
    <li class="top-level">Login</li>
</ul>

Javascript:

function alignMenuItems(){
    var totEltWidth = 0;
    var menuWidth = $('ul.menu')[0].offsetWidth;
    var availableWidth = 0;
    var space = 0;

    var elts = $('.menu li.top-level'); //<-
    elts.each(function(inx, elt) {
        // reset paddding to 0 to get correct offsetwidth
        $(elt).css('padding-left', '0px');
        $(elt).css('padding-right', '0px');

        totEltWidth += elt.offsetWidth;
    });

    availableWidth = menuWidth - totEltWidth;

    space = availableWidth/(elts.length);

    elts.each(function(inx, elt) {
        $(elt).css('padding-left', (space/2) + 'px');
        $(elt).css('padding-right', (space/2) + 'px');
    });
}