Javascript 当使用Jquery UI animate函数显示/隐藏子元素时，父div在没有动画的情况下变宽

我遇到的问题是，当我尝试用jquery动画显示/隐藏div元素时，它会平滑地打开，但它的父元素不会平滑地打开。同样的情况也发生在隐藏上

因此，我的整个页面内容受到了冲击

演示：

HTML:

css:

以下是工作流程，修改css如下：

#block-block-48 {
}
#block-block-48 .content {
    margin: 0;
    text-align: right;
    background: none repeat scroll 0 0 #ff0000;
}

由于您的幻灯片元素是

#block-block-48。内容

，但背景色设置为

#block-block-48

以下是工作原理，请按如下方式修改css：

#block-block-48 {
}
#block-block-48 .content {
    margin: 0;
    text-align: right;
    background: none repeat scroll 0 0 #ff0000;
}

---

因为您的幻灯片元素是

#block-block-48.content

，但背景色设置为

#block-block-48

，首先，从

div.content

中取出

显示：block

然后将以下内容添加到CSS中：

 #block-block-48 > .content {
     display:none;
 }

之后，将JS更改为以下内容：

$(function() {
    // slide effect for showing and hiding A-Z header block  
     $('#block-block-48 h2').click(function(){ 
         $(this).next().slideToggle();
     });
});

那应该可以解决它

让我知道这是否是你想要的动画。如果没有，我可以提出其他建议

---

首先，从

div.content

中取出

display:block

然后将以下内容添加到CSS中：

 #block-block-48 > .content {
     display:none;
 }

之后，将JS更改为以下内容：

$(function() {
    // slide effect for showing and hiding A-Z header block  
     $('#block-block-48 h2').click(function(){ 
         $(this).next().slideToggle();
     });
});

那应该可以解决它

让我知道这是否是你想要的动画。如果没有，我可以提出其他建议

---

更改jQuery函数是最简单的方法。而不是在css上浪费时间

把这行改成

 $("#block-block-48 > .content").stop().toggle(effect, options, duration);

这条线

$("#block-block-48 > .content").slideToggle();

---

更改jQuery函数是最简单的方法。而不是在css上浪费时间

把这行改成

 $("#block-block-48 > .content").stop().toggle(effect, options, duration);

这条线

$("#block-block-48 > .content").slideToggle();

使用滑动切换

js

使用滑动切换

js

---

在函数中使用此选项

 $(function() {
    // slide effect for showing and hiding A-Z header block    
    $('#block-block-48 > .content').hide();
    $('#block-block-48 h2').click(function(){ 

   $("#abovediv").toggle("slow");
    });

  });

Id“overdiv”表示以下标签

<h2>INDEX A-Z</h2>
<div id = "abovediv" class="content" style="display: block;">
<div id="atozSlide">

索引A-Z

在函数中使用此选项

 $(function() {
    // slide effect for showing and hiding A-Z header block    
    $('#block-block-48 > .content').hide();
    $('#block-block-48 h2').click(function(){ 

   $("#abovediv").toggle("slow");
    });

  });

Id“overdiv”表示以下标签

<h2>INDEX A-Z</h2>
<div id = "abovediv" class="content" style="display: block;">
<div id="atozSlide">

索引A-Z

尝试以下代码：

<script>
$(function() {
  $('#block-block-48 > .content').hide();
  $('#block-block-48 h2').click(function(){ 
    var _header = $(this);
    var _content = _header.next();
    if(_content.is(':visible'))
    {
      _content.slideUp();
    }
    else
    {
      _content.slideDown();
     }
   });
 });
</script>

$（函数（）{
$（'#block-block-48>.content'）.hide（）；
$（'#block-block-48 h2'）。单击（函数（）{
var_头=$（此）；
var_content=_header.next（）；
如果（_content.is（':visible'））
{
_content.slideUp（）；
}
其他的
{
_content.slideDown（）；
}
});
});

尝试以下代码：

<script>
$(function() {
  $('#block-block-48 > .content').hide();
  $('#block-block-48 h2').click(function(){ 
    var _header = $(this);
    var _content = _header.next();
    if(_content.is(':visible'))
    {
      _content.slideUp();
    }
    else
    {
      _content.slideDown();
     }
   });
 });
</script>

$（函数（）{
$（'#block-block-48>.content'）.hide（）；
$（'#block-block-48 h2'）。单击（函数（）{
var_头=$（此）；
var_content=_header.next（）；
如果（_content.is（':visible'））
{
_content.slideUp（）；
}
其他的
{
_content.slideDown（）；
}
});
});

但是为什么它需要使用slideToggle（）而不是toggle？亲爱的Amit，实际上只编写toggle是没有问题的，但是您没有正确设置参数，这就是它不起作用的原因。有关更多参考信息，请访问：但是为什么它需要使用slideToggle（）而不是toggle？亲爱的Amit，实际上编写toggle没有问题，但您没有正确设置参数，这就是为什么它不起作用。有关更多参考资料，请访问：