0

我正在使用 JQuery，并且正在尝试在子 div 滑入和滑出时更改 div 框的 html。我的问题是下面的代码没有改变#menu_text 的html 值。它只显示隐藏菜单，并没有检测到由 slideToggle 更改的真实高度。

 $('#menu').click(function () {
  $('#menu_links').slideToggle('slow', function(){

   console.log('Debug : %s', $('#menu_links').height());

   if ($('#menu_links').height() == 1)
    $('#menu_text').html("Show Menu");
   else if ($('#menu_links').height() == 20)
    $('#menu_text').html("Hide Menu");

  });
 });

在 firebug 控制台中检查后，高度的值永远不会从 20 更改，除非您非常快速地多次单击 div，然后它将更改为 1。（我应该补充一点，样式表中定义的高度是 20）

文档说 slideToggle 只影响对象的高度。我错过了什么吗？感谢您的帮助。

    <div id="menu"><p id="menu_text">Show Menu</p>
     <div id="menu_links">
            Stuff
   </div>
 </div>
4

2 回答 2

1

尝试：

$('#menu').click(function(){
    $('#menu_links').slideToggle('slow', function(){
        $('#menu_text').html($('#menu_links:visible').length ? "Hide menu" : "Show menu");
    });
});

在那里，您将根据链接元素是否可见来设置菜单的文本。最好不要依赖元素的高度和宽度，因为在最坏的情况下，它们可能会因浏览器而异（在这种情况下，它们也会根据链接元素的内容而变化）。

于 2009-11-15T22:22:26.873 回答
0

您还可以使用 data() 来保存您的状态。这是保存状态或任何东西的好方法

$('#menu').click(function () {
  $('#menu_links').slideToggle('slow', function(){

   var $this = $(this);
   var toggled = $this.data('toggled');
   if (toggled)
    $('#menu_text').html("Show Menu");
   else 
    $('#menu_text').html("Hide Menu");
   $this.data('toggled', !toggled)

  });
 });
于 2009-11-15T22:36:10.430 回答