Javascript 手风琴代码不能正常工作，如何修复？

我正在尝试为我的投资组合页面模板，为我的网站制作我自己的手风琴。当任何一次点击accodion时，都会显示相应的工作片段等。。。现在，我正在尝试这个演示，但我停留在中间。 我目前使用的代码如下所示： Html代码段：

<div class="accordion-content">
   <ul>
     <li class="current">
       <h3>Donec at neque eget lacus lobortis molestie</h3>
       <div class="content current">
           <p>Nulla risus orci, viverra nec lacinia at, aliquam vel justo. Phasellus felis purus, placerat vel augue vitae, aliquam tincidunt dolor. Sed hendrerit diam in mattis mollis. Donec ut tincidunt magna. </p>
       </div>
     </li>
     <li class="">
       <h3>Phasellus felis purus, placerat vel augue vitae</h3>
       <div class="content" style="display: none;">
          <p>Nulla risus orci, viverra nec lacinia at, aliquam vel justo. Phasellus felis purus, placerat vel augue vitae, aliquam tincidunt dolor. Sed hendrerit diam in mattis mollis. Donec ut tincidunt magna. </p>
       </div>
     </li>
 </ul>
</div>

虽然我所有的css显示的工作很好。。。问题是，一旦我点击h3，它会显示div内容，但一旦我点击另一个比显示的旧div快的h3，它会破坏整个过程，结果不会显示为我想要的。。。有没有人建议我现在该怎么做，或者有没有比这更简单的方法？ 以下是css代码片段：

.accordion-content {
    li {
      margin-bottom: 10px;
      border: 1px solid #dedede;
      background: #ececec url("../images/plus-minus.png") no-repeat;
      background-position: 96% 45%;
      background-width: 8px;
      background-height: 10px ;
      &.current {
        background: #ececec url("../images/minus.png") no-repeat;
        background-position: 96% 11%;
      }
    }
    h3 {
      font-size: 16px;
      font-family: 'open sans', sans-serif;
      text-align: left;
      color: #2c2725;
      padding: 10px 0 10px 20px;
      &:hover {
        cursor: pointer;
      }
    }
    .content {
      width: 100%;
      background: #ffffff;
      padding: 10px 0 10px 0;
      text-align: center;
      display: none;
      text-align: left;
      padding: 15px;
      padding-bottom: 55px;
      p {
        font-size: 14px;
        line-height: 24px;
        color: #7f8281;
      }
    }
    .current {
      display: block;
    }
  }

---

问候

以下是可能对您有所帮助的建议

jQuery代码

---

问题不在这里，我觉得，只要看看JSF中的代码片段，你的结果看起来很酷。你还想要什么？我觉得唯一的变化是，你应该补充

.stop(true,true)

为了使您的手风琴正确加载，您只需在加载之前单击，结果看起来与您预期的不同。 因此，您的新代码段如下所示：

 $('.accordion-wrapper .accordion-content ul li h3').click(function(){

    var parent = $(this).parent('li');
    if(parent.hasClass('current')){
        $(this).next('div').stop(true,true).slideUp();
        parent.removeClass('current');
        //$(this).parent('li').children('.content').slideUp();
    }
    else
    {
        parent.siblings().children('div').stop(true,true).slideUp();
        parent.addClass('current');
        parent.siblings().removeClass('current');
        $(this).next('div').stop(true,true).slideDown();
        $(this).parent('li').addClass('current');
        //$(this).parent('li').children('.content').slideDown();
    }
});

我希望现在一切都会好起来，您的整个代码足以完成这项工作，而现在只需要这两行代码就可以完成剩下的工作。

---

关于

没有显示css…您还可以从代码中创建JFIDLE:示例吗？css片段很好地显示了结果，因为使用css的唯一过程是我们必须显示我们的工作。为方便起见，我现在将代码片段放在上面的问题中。

.stop(true,true)

 $('.accordion-wrapper .accordion-content ul li h3').click(function(){

    var parent = $(this).parent('li');
    if(parent.hasClass('current')){
        $(this).next('div').stop(true,true).slideUp();
        parent.removeClass('current');
        //$(this).parent('li').children('.content').slideUp();
    }
    else
    {
        parent.siblings().children('div').stop(true,true).slideUp();
        parent.addClass('current');
        parent.siblings().removeClass('current');
        $(this).next('div').stop(true,true).slideDown();
        $(this).parent('li').addClass('current');
        //$(this).parent('li').children('.content').slideDown();
    }
});