javascript - 当使用 Jquery UI 动画功能显示/隐藏子元素时，父 div 变得更宽而没有动画

Question

我遇到的问题是，当我尝试使用 jquery 动画显示/隐藏 div 元素时，它可以顺利打开，但它的父元素无法顺利打开。隐藏时也会发生同样的情况。

因此我的整个页面内容都发生了变化。

演示:http://jsfiddle.net/neDZP/7/

HTML:

<div id="A_to_Z_top">     
    <div class="section clearfix">
        <div class="region region-a-to-z-top">
            <div class="block block-block contextual-links-region" id="block-block-48">
                <h2>INDEX A-Z</h2>
                <div class="content" style="display: block;">
                    <div id="atozSlide">
                        <ul>
                            <li><a href="#">A</a></li>
                            <li><a href="#">B</a></li>
                            <li><a href="#">C</a></li>
                            <li><a href="#">D</a></li>
                            <li><a href="#">E</a></li>
                            <li><a href="#">E</a></li>
                            <li><a href="#">F</a></li>
                            <li><a href="#">G</a></li>
                            <li><a href="#">H</a></li>
                            <li><a href="#">I</a></li>
                            <li><a href="#">J</a></li>
                            <li><a href="#">K</a></li>
                            <li><a href="#">L</a></li>
                            <li><a href="#">M</a></li>
                            <li><a href="#">O</a></li>
                            <li><a href="#">P</a></li>
                            <li><a href="#">Q</a></li>
                            <li><a href="#">R</a></li>
                            <li><a href="#">S</a></li>
                            <li><a href="#">T</a></li>
                            <li><a href="#">U</a></li>
                            <li><a href="#">V</a></li>
                            <li><a href="#">W</a></li>
                            <li><a href="#">X</a></li>
                            <li><a href="#">Y</a></li>
                            <li><a href="#">Z</a></li>
                        </ul>
                    </div>  
                </div>
            </div>
        </div>
    </div>
</div>
<P> This paragraph should be slide down smothly <p>

Javascript:

$(function() {
  // slide effect for showing and hiding A-Z header block    
  $('#block-block-48 > .content').hide();
  $('#block-block-48 h2').click(function(){ 
      var effect = 'slide';
      var options = { direction: 'up' };
      var duration = 300;
      $("#block-block-48 > .content").stop().toggle(effect, options, duration);
  });
});

CSS:

#block-block-48 {
  background: none repeat scroll 0 0 #ff0000;
}

#block-block-48 h2 {
   background:  #035d8e;
   color: #ffffff;
   cursor: pointer;
   font-family: sans-serif;
   font-size: 16px;
   margin: 0;
   padding: 6px 15px 6px 0;
   text-align: right;
   text-decoration: none;
}

#block-block-48 .content {
    margin: 0;
    text-align: right;
}

#block-block-48 ul li {
    display: inline-block;
    float: left;
    list-style: none outside none;
    margin: 0 0 0 2px;
}

#block-block-48 ul li a {
    background: none repeat scroll 0 0 #035d8e;
    color: #ffffff;
    display: block;
    float: left;
    font-family: sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0 8px;
}

#block-block-48 ul {
    display: inline-block;
    margin: 5px 0 0;
    padding: 0;
}

Answer 1

首先，从 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();
     });
});

应该可以解决!

如果这就是您想要的动画，请告诉我。如果没有，我可以建议其他事情。

Fiddle for reference