2

我有一个简单的文件,其中包含一个 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 时,但是当您单击 Hide all 时,它将全部关闭,并且根据 Firefox,将项目更改为

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

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

这页纸

4

4 回答 4

3

我希望绑定失败,因为绑定完成后没有显示

更好的选择是切换

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

在这里演示

$('#hideall').toggle(
  function(){
    $('.inner_div').slideUp('slow');
    $(this).text("Show all Menus");
  },
  function(){
    $('.inner_div').slideDown('slow');
    $(this).text("Hide all Menus");
  }
);
于 2011-06-21T16:37:10.530 回答
2

当 id 消失时,它会分离绑定到它的事件。您可以尝试live事件绑定。

$('#hideall').live('click', function(){
    $('.inner_div').slideUp('slow');
    $(this).parent().html("<span id=\"showall\">Show all Menus</span>");
});
$('#showall').live('click', function(){
    $('.inner_div').slideDown('slow');
    $(this).parent().html("<span id=\"hideall\">Hide all Menus</span>");
});
于 2011-06-21T16:37:50.213 回答
0

您需要使用委托或现场来定义事件。上面的事件所做的只是将处理程序绑定到页面上的现有元素,而 live/delegate 函数绑定到现有和未来的元素。

$(document).delegate('.grey_title', "click",function(){
        $(this).parent().find('.inner_div').slideToggle('slow');
 }).delegate('#hideall'."click", function(){
        $('.inner_div').slideUp('slow');
        $(this).parent().html("<span id=\"showall\">Show all Menus</span>");
}).delegate('#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>
于 2011-06-21T16:37:39.247 回答
0

您正在将 click 事件绑定到一个尚不存在的元素...试试这个:

$('#showall').live('click', function(){
        $('.inner_div').slideDown('slow');
        $(this).parent().html("<span id=\"hideall\">Hide all Menus</span>");
    });
于 2011-06-21T16:38:05.960 回答