jQuery Hide / Show (div с измененным идентификатором attr) - PullRequest
Новая
       6

jQuery Hide / Show (div с измененным идентификатором attr)

1 голос
/ 28 сентября 2011

Я больно делать это: 

<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), оно не скрывается? Это ничего не делает.

Ответы [ 3 ]

2 голосов
/ 28 сентября 2011

Вам необходимо использовать jQuery делегат () или 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 ...});
1 голос
/ 28 сентября 2011

hide-menu не существует во время вызова функции готовности документа и, следовательно, не будет ограничено.
вам нужно использовать live, чтобы событие было ограничено так, как оно выглядит.

0 голосов
/ 28 сентября 2011

То, что делает .click (), это привязывает функцию к событию click к селектору. Поскольку вы делаете $ ('# hide-menu'). Click (function () до того, как html-элемент # hide-menu существует, он не будет работать, вы должны поместить $ ('# hide-menu'). click (function () {после $ (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, вам следует связать событие там

...