JQuery 幻灯片事件和 div 高度未按预期更改答案

【问题标题】：JQuery Slide Event and Div Height not changing as expectedJQuery 幻灯片事件和 div 高度未按预期更改
【发布时间】：2010-12-16 20:35:37
【问题描述】：

我正在使用 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控制台中检查，height的值永远不会从20改变，除非你真的快速多次点击div然后它会变成1。（我应该补充一点，样式表中定义的高度是20）

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

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

【问题讨论】：

所以在 Firebug 中检查时高度不会改变。菜单项是否滑入和滑出？你有什么问题？
菜单项滑入滑出，但html不变。我的猜测是，因为 div 的 .height() 并没有从 20 改变它应该是的。
在我将条件语句放在slideToggle 的回调中之前，我将它放在slideToggle 之外，并在条件语句中放置了2 个滑动切换。我当时看到的是值从 20 变为 1 并返回，但它并没有改变 html，就好像它没有给我正确的高度值一样。然后我对其进行了修改，将条件语句放入回调中，这就是我留下的。高度的值应该是变化的，而不是停留在 20，因为幻灯片实际上正在工作。

标签： javascript jquery height slidetoggle

【解决方案1】：

试试：

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

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

【讨论】：

谢谢。我没有意识到 jquery 操作有一个可见的选择器。每天学习新东西。

【解决方案2】：

您也可以使用 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)

  });
 });

【讨论】：

谢谢，我应该检测到某种状态变化，而不是它可能的实际值。