0

我想将 2 个响应式菜单放在一个页面中，两者完全相同，一个在顶部，一个在底部，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/>

但这不起作用

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

4

1 回答 1

2

您的代码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');
            }
        });

    });
});

编辑：更新以消除几个错误

于 2013-05-21T00:33:01.030 回答