Question

我在做这件事时遇到了麻烦：

<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）它会正确显示，但是当我再次单击“隐藏菜单”（#clide-menu）时，它会隐藏吗？它什么都不做。

Answer 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 ...});

Answer 2

在文档就绪函数调用期间，

hide-menu不存在，因此不受限制你需要使用live才能使事件有效。

Answer 3

.click（）的作用是将函数绑定到选择器的click事件。因为你正在做$（'＃hide-menu'）。在＃hide-menu html元素存在之前点击（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中时，你应该将事件绑定在那里

jQuery隐藏/显示（带有修改后的id attr的div）

3 个答案: