javascript - div 从左下角进入而不是下拉

Question

使用带有切换功能的 jQuery hide...基本上我正在尝试制作手风琴，但客户希望能够同时打开多个内容区域。

一切正常，但我不知道如何控制文本动画的外观。理想情况下，我只希望它从标题下方滑下。位它似乎从右下角出现。

这是我的html：

<div id="accordion">

  <h3 class="dropdown dropdown-default-on">About Me</h3>
  <div id='about-div'>
    <p>Some info about Me. Lorem ipsum dolor sit amet.</p>
  </div>

  <h3 class="dropdown">My Skills</h3>
  <div id='about-div'>
    <p>Some info about my Skills. Lorem ipsum dolor sit amet.</p>
  </div>

</div>

这是我的jsfiddle

Answer 1

也许slideToggle()改用：

http://jsfiddle.net/isherwood/9hmhU/5

jQuery(function () {
    $('.dropdown').click(function () {
        $(this).next().slideToggle(300);
    });
});

其他说明：我删除了一些似乎没有做任何事情的代码。此外，您有重复的 ID 值，这是不允许的。最后，TidyUp 按钮是您的朋友。:-)

Answer 2

更新你小提琴

看一看

这是更新的代码

jQuery( function() {
     $('.dropdown').click(function() {
         if($(this).next().is(":visible")){
    $(this).next().slideUp(300);
         }
         else{
         $(this).next().slideDown(300);
         }
    return false;
  } ).next().hide();

    $('.dropdown-default-on').next().toggle(300);

       } );