jQuery 隐藏/显示（修改了 id attr 的 div）答案

【问题标题】：jQuery Hide / Show (div with modified id attr)jQuery 隐藏/显示（修改了 id attr 的 div）
【发布时间】：2011-11-27 03:35:52
【问题描述】：

我在这样做时遇到了麻烦：

<div id="show-menu">Show Menu</div>

    <script type="text/javascript"> 
        $(document).ready(function() {
            $('#show-menu').click(function() {
                $(this).animate({marginRight:'70px'}, 500);
                $('#menu').animate({width:'300px'}, 500);
                $('.menu-menu-principal-container, #header h1').animate({marginRight:'70px'}, 500);
                $(".menu-menu-principal-container, #header h1").show("slow");
                $("#show-menu").hide("slow");
                $("#hide-menu").show("slow");
                $(this).text('Hide Menu');
                $(this).attr('id', 'hide-menu');            
            });
            $('#hide-menu').click(function() {
                $(this).animate({marginRight:'-70px'}, 500);
                $('#menu').animate({width:'100px'}, 500);
                $('.menu-menu-principal-container, #header h1').animate({marginRight:'-70px'}, 500);
                $(".menu-menu-principal-container, #header h1").hide("slow");
                $(this).text('Show Menu');
                $(this).attr('id', 'show-menu');
            });
        })

    </script>

如果我点击显示菜单 (#show-menu) 它会正确显示，但是当我再次点击隐藏菜单 (#hide-menu) 时它不会隐藏？它什么也不做。

【问题讨论】：

标签： jquery hide show show-hide

【解决方案1】：

您需要使用 jQuery delegate() 或 live()

我最好像这样使用委托

$('body').delegate('#show-menu', 'click', function() { ... your code ... });
$('body').delegate('#hide-menu', 'click', function() { ... your code ... });

请记住，您可以从 DOM 中的不同位置进行委托，而不是 $('body').delegate();，您可以使用 $('#myparentContainer').delegate();

替代方法是使用这样的现场活动

$('#show-menu').live('click', function() { ... your code ...});
$('#hide-menu').live('click', function() { ... your code ...});

【讨论】：

【解决方案2】：

.click() 的作用是将一个函数绑定到选择器的点击事件。由于您在 #hide-menu html 元素存在之前执行 $('#hide-menu').click(function() ，因此它不起作用，您应该放置 $('#hide-menu')。 click(function() { after $(this).attr('id', 'hide-menu');

$(document).ready(function() {
            $('#show-menu').click(function() {
                $(this).animate({marginRight:'70px'}, 500);
                $('#menu').animate({width:'300px'}, 500);
                $('.menu-menu-principal-container, #header h1').animate({marginRight:'70px'}, 500);
                $(".menu-menu-principal-container, #header h1").show("slow");
                $("#show-menu").hide("slow");
                $("#hide-menu").show("slow");
                $(this).text('Hide Menu');
                $(this).attr('id', 'hide-menu');  
$('#hide-menu').click(function() {
                $(this).animate({marginRight:'-70px'}, 500);
                $('#menu').animate({width:'100px'}, 500);
                $('.menu-menu-principal-container, #header h1').animate({marginRight:'-70px'}, 500);
                $(".menu-menu-principal-container, #header h1").hide("slow");
                $(this).text('Show Menu');
                $(this).attr('id', 'show-menu');
            });          
            });

        })

您也可以使用 live()，因为它“现在或将来绑定”，但效率较低，因为您“知道”#hide-menu 属性何时出现在 DOM 中，您应该在那里绑定事件

【讨论】：

【解决方案3】：

在文档就绪函数调用期间隐藏菜单不存在，因此不会被限制。
您需要使用 live 来限制事件的出现。

【讨论】：