jQuery的隱藏/顯示（DIV與修改ID attr）使用

我有truoble這樣做：jQuery的隱藏/顯示（DIV與修改ID attr）使用

<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>

如果我上顯示菜單點擊（＃節目菜單），它顯示正常，但是當我再次點擊在隱藏菜單（＃隱藏菜單）它不會隱藏？它什麼也沒做。

來源

2011-09-28 Alberto

你需要使用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 ...});

來源

2011-09-28 19:15:26

.click（）所做的是將函數綁定到選擇器的click事件。因爲你正在做$（'＃hide-menu'）。在隱藏菜單的html元素存在之前單擊（function（），它將不起作用，你應該放置$（'＃hide-menu'）。點擊（函數（）{$之後（這個）.attr（「身份證」，「隱藏菜單」）;

$(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'); 
      });   
      }); 

     })

，您還可以使用實時（），因爲它「現在或將來結合」，但效率不高，因爲當「隱藏菜單」屬性出現在DOM中時，您應該將事件綁定到那裏

來源

2011-09-28 19:17:22 Juan

在文檔就緒函數調用期間隱藏菜單不存在，因此不會受到限制
您需要使用live才能使事件發生有界

來源

2011-09-28 19:17:31 Jayendra

jQuery的隱藏/顯示（DIV與修改ID attr）使用

回答

相關問題