2

作成した 2 つのスクリプトがあります。1 つはデスクトップのマルチレベル ドロップダウン ナビゲーション用で、もう 1 つはレスポンシブになる場合です。私が見ていないこのスクリプトを単純化/圧縮する方法はありますか?

これが私の簡易版です。

$(document).ready(function () {
$('ul.primary li').click(function () {
    var a = this;
    if ($('ul', this).is(':visible')) {
        $('ul', this).slideUp(function () {
            $(a).removeClass('active')
        })
    } else {
        $('ul.drop').slideUp();
        $('ul.primary li').removeClass('active');
        $('ul', this).slideDown();
        $(a).addClass('active')
    }
});
$('body').click(function (a) {
    if (!$(a.target).is('a')) {
        $('ul.drop').slideUp();
        $('ul.primary li').removeClass('active')
    }
});
$(function () {
    $('.mobile-nav').click(function (e) {
        $('.primary').slideToggle(150, "swing");
        e.stopPropagation()
    });
    $(window).resize(function() {
        $('ul.drop').slideUp();
        $('ul.primary li').removeClass('active')
    });
})
});

マークアップは次のとおりです。

<div class="nav">
    <div class="mobile-nav">Navigation</div>
        <ul class="primary">
            <li><a href="#link">Link</a></li>
            <li><a class="has-drop">Link w/ Children <span></span></a>
            <ul class="drop">
                <li><a href="#link">Link</a></li>
                <li><a href="#link">Link</a></li>
                <li><a href="#link">Link</a></li>
                <li><a href="#link">Link</a></li>
                <li><a href="#link">Link</a></li>
            </ul>
            </li>
            <li><a class="has-drop" href="#link">Link w/ Children <span></span></a>
            <ul class="drop">
                <li><a href="#link">Link</a></li>
                <li><a href="#link">Link</a></li>
                <li><a href="#link">Link</a></li>
                <li><a href="#link">Link</a></li>
                <li><a href="#link">Link</a></li>
            </ul>
            </li>
            <li><a href="#link">Link</a></li>
            <li><a href="#link">Link</a></li>
        </ul>
        <div class="clear"></div>
    </div>
</div>

私が今抱えている問題は、 window.Resize 関数が常に起動していないことです。ウィンドウのサイズが変更されたときに、開いているすべての ul.drop を閉じようとしています。

また、ブラウザのサイズをデスクトップの幅に戻すと、ul.drops が途切れるように見え、リフレッシュするまで含まれている要素を越えてスライドダウンしません。

4

1 に答える 1

3

http://dean.edwards.name/packer/は、自分で圧縮するのに適した場所です。
使い方はかなり自明です:)

于 2012-11-27T14:26:32.320 に答える