Question

我想在一个页面中放置两个响应式菜单，两者完全相同，一个在顶部，一个在底部， 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 pull，如上所述

并在另一个jquery脚本中使用#bottompull底部的id bottompull

a）这会引起冲突吗？

b）有没有办法组合脚本？

我试图在这里为#bottompull添加另一个变量，

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

但这不起作用

有人可以指出我正确的方向吗

Answer 1

您的代码会在您第二次将其设置为小提琴时重新定义pull变量。您需要做的是为菜单的每个实例运行代码，而不是同时运行两个菜单。我已经更新了你的小提琴，使用$ .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');
            }
        });

    });
});

编辑：已更新以删除一些错误

如何组合2个响应式菜单的代码

1 个答案: