0

1 つのページに 2 つのレスポンシブ メニューを配置したいと思います。どちらもまったく同じで、上部と下部に 1 つずつあります。HTML は次のとおりです。

 <a href="#" id="pull">Menu</a>

そしてjqueryは次のとおりです：-

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"
    type="text/javascript"></script>

<script>
    $(function() {
        var pull        = $('#pull');
            menu        = $('nav ul');
            menuHeight  = menu.height();

        $(pull).on('click', function(e) {
            e.preventDefault();
            menu.slideToggle();
        });

        $(window).resize(function(){
            var w = $(window).width();
            if(w > 320 && menu.is(':hidden')) {
                menu.removeAttr('style');
            }
        });
    });
</script>

上記のようにjqueryスクリプトで#pullを使用して、上部に2つのクラスのIDプルを作成すると

別の jquery スクリプトで #bottompull を使用して下部の id bottompull

a) これは競合を引き起こしますか?

b) スクリプトを組み合わせる方法はありますか?

ここに #bottompull の別の変数を追加しようとしましたが、

     <http://jsfiddle.net/rz85X/9/>

しかし、これは機能しません

誰かが私を正しい方向に向けてください

4

1 に答える 1

2

pullフィドルで 2 回目に変数を設定すると、コードによって変数が再定義されます。両方のメニューを一度に実行するのではなく、メニューのインスタンスごとにコードを実行する必要があります。$.each を使用して両方のメニューを個別に実行するようにフィドルを更新しました: http://jsfiddle.net/jakelauer/rz85X/13/

コードは次のとおりです。

$(function() {
    var pull = $('#pull, #bottompull');

    pull.each(function(){
        $(this).on('click', function(e) {
            menu        = $(this).closest('nav').find('ul');
            menuHeight  = menu.height();
            e.preventDefault();
            menu.slideToggle();
        });
    });

    $(window).resize(function(){
        var w = $(window).width();
        $('nav ul').each(function(){
            if(w > 320 && $(this).is(':hidden')) {
                $(this).removeAttr('style');
            }
        });

    });
});

編集：いくつかのエラーを削除するために更新されました

于 2013-05-21T00:33:01.030 に答える