javascript - 更改ID后JQuery功能不起作用

Question

我有一个简单的文件，其中包含一个 Jquery 脚本，如下所示:

<script type="text\javascript">     
$('.grey_title').click(function(){
        $(this).parent().find('.inner_div').slideToggle('slow');
    });
    $('#hideall').click(function(){
        $('.inner_div').slideUp('slow');
        $(this).parent().html("<span id=\"showall\">Show all Menus</span>");
    });
    $('#showall').click(function(){
        $('.inner_div').slideDown('slow');
        $(this).parent().html("<span id=\"hideall\">Hide all Menus</span>");
    });
   });
</script>
  <div><span id="hideall">Hide all Menus</span></div>

该功能在隐藏菜单时工作正常，并且当您在 HTML 中将 ID 更改为 showall 并将脚本更改为 slideToggle 时，但是当您单击全部隐藏时，它将全部关闭，并且根据 Firefox，将项目更改为

<span id="showall">...</span>

但是，当再次单击时，它什么也不做。我可能做错了什么？

页面

Answer 1

我预计绑定(bind)会失败，因为绑定(bind)完成后没有显示效果

更好的选择是toggle

您可能希望切换功能以匹配页面加载时显示的内容

DEMO HERE

$('#hideall').toggle(
  function(){
    $('.inner_div').slideUp('slow');
    $(this).text("Show all Menus");
  },
  function(){
    $('.inner_div').slideDown('slow');
    $(this).text("Hide all Menus");
  }
);