Jquery Accordion from Scratch是不稳定的

Question

我正在尝试从头开始制作手风琴。以下是我的问题。

问题1：但是，如何使用"第n个子"属性来显示slidetext的第一部分？

问题2：我如何优化我的Jquery代码，而不是每次调用mouseenter事件时都滑动所有内容，我可以检查哪些部分是打开的，然后只滑动那个打开的部分？？现在它非常不稳定，页脚向上滑动，产生了非常不稳定的效果。

JS:

jQuery(function ($) {
    var slidetext=$('.slide_text');
    var box=$('.box');
    slidetext.addClass('hide');
    $('#content').on('mouseenter','.slide_header', function () {
<!--     $slidetext.addClass('hide'); -->
     slidetext.slideUp(200);
    box.removeClass('boxlight');
     $(this).find(box).addClass('boxlight');
      $(this).next().slideDown(200);
    })
});

HTML:

<div id ="container_wrap">
  <div id ="header_wrap">
    <div id = "header">
      <div class = "logo"> </div>
      <div class = "search">
        <input type=search name=s>
      </div>
    </div>
  </div>
  <div id ="content_wrap">
    <div id ="container">
      <div id = "navbar">
        <ul>
          <li>home</li>
          <li>about us</li>
          <li>services</li>
          <li>contact us</li>
        </ul>
      </div>
      <div id = "content">
        <h1>Page Title</h1>
        <h2> Some Kind of Subheading About Whatever This Is</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dui diam, tempor nec tempor id, sollicitudin facilisis ligula. Sed accumsan luctus sem, non malesuada nisi porttitor at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi tristique, nunc a mollis iaculis, lorem quam mollis nulla, a pretium augue leo nec arcu. Curabitur sodales pharetra sem, id volutpat nisi semper vitae. Proin erat diam, laoreet vel pretium vitae, mattis vel ipsum. Morbi euismod suscipit dui. Maecenas gravida ultrices magna sed feugiat. </p>
        <div class = "slide">
          <div class = "slide_header">
            <h3>Some Section Title 1</h3>
            <div class = "box">
              <p>-</p>
            </div>
          </div>
          <div class = "slide_text">
            <p>Donec massa enim, tempor id fringilla sit amet, ultrices in ante. In sagittis lectus eu risus dignissim bibendum. Mauris in pretium enim. In hac habitasse platea dictumst. Suspendisse lobortis, lectus vel semper imperdiet, est risus faucibus purus, et ultrices orci metus non arcu. Aliquam iaculis congue volutpat. Sed ac massa dui. Mauris dapibus mollis sem vel adipiscing. Aliquam quam eros, pulvinar eu dapibus non, tempor vitae orci. Cras suscipit viverra felis et mattis. 
              Donec massa enim, tempor id fringilla sit amet, ultrices in ante. In sagittis lectus eu risus dignissim bibendum. Mauris in pretium enim. In hac habitasse platea dictumst. Suspendisse lobortis, lectus vel semper imperdiet, est risus faucibus purus, et ultrices orci metus non arcu. Aliquam iaculis congue volutpat. Sed ac massa dui. Mauris dapibus mollis sem vel adipiscing. Aliquam quam eros, pulvinar eu dapibus non, tempor vitae orci. Cras suscipit viverra felis et mattis. 
              Donec massa enim, tempor id fringilla sit amet, ultrices in ante. In sagittis lectus eu risus dignissim bibendum. Mauris in pretium enim. In hac habitasse platea dictumst. Suspendisse lobortis, lectus vel semper imperdiet, est risus faucibus purus, et ultrices orci metus non arcu. Aliquam iaculis congue volutpat. </p>
          </div>
        </div>
        <div class = "slide">
          <div class = "slide_header">
            <h3>Some Section Title 1</h3>
            <div class = "box">
              <p>-</p>
            </div>
          </div>
          <div class = "slide_text">
            <p>Donec massa enim, tempor id fringilla sit amet, ultrices in ante. In sagittis lectus eu risus dignissim bibendum. Mauris in pretium enim. In hac habitasse platea dictumst. Suspendisse lobortis, lectus vel semper imperdiet, est risus faucibus purus, et ultrices orci metus non arcu. Aliquam iaculis congue volutpat. Sed ac massa dui. Mauris dapibus mollis sem vel adipiscing. Aliquam quam eros, pulvinar eu dapibus non, tempor vitae orci. Cras suscipit viverra felis et mattis. 
              Donec massa enim, tempor id fringilla sit amet, ultrices in ante. In sagittis lectus eu risus dignissim bibendum. Mauris in pretium enim. In hac habitasse platea dictumst. Suspendisse lobortis, lectus vel semper imperdiet, est risus faucibus purus, et ultrices orci metus non arcu. Aliquam iaculis congue volutpat. Sed ac massa dui. Mauris dapibus mollis sem vel adipiscing. Aliquam quam eros, pulvinar eu dapibus non, tempor vitae orci. Cras suscipit viverra felis et mattis. 
              Donec massa enim, tempor id fringilla sit amet, ultrices in ante. In sagittis lectus eu risus dignissim bibendum. Mauris in pretium enim. In hac habitasse platea dictumst. Suspendisse lobortis, lectus vel semper imperdiet, est risus faucibus purus, et ultrices orci metus non arcu. Aliquam iaculis congue volutpat. </p>
          </div>
        </div>
        <div class = "slide">
          <div class = "slide_header">
            <h3>Some Section Title 1</h3>
            <div class = "box">
              <p>-</p>
            </div>
          </div>
          <div class = "slide_text">
            <p>Donec massa enim, tempor id fringilla sit amet, ultrices in ante. In sagittis lectus eu risus dignissim bibendum. Mauris in pretium enim. In hac habitasse platea dictumst. Suspendisse lobortis, lectus vel semper imperdiet, est risus faucibus purus, et ultrices orci metus non arcu. Aliquam iaculis congue volutpat. Sed ac massa dui. Mauris dapibus mollis sem vel adipiscing. Aliquam quam eros, pulvinar eu dapibus non, tempor vitae orci. Cras suscipit viverra felis et mattis. 
              Donec massa enim, tempor id fringilla sit amet, ultrices in ante. In sagittis lectus eu risus dignissim bibendum. Mauris in pretium enim. In hac habitasse platea dictumst. Suspendisse lobortis, lectus vel semper imperdiet, est risus faucibus purus, et ultrices orci metus non arcu. Aliquam iaculis congue volutpat. Sed ac massa dui. Mauris dapibus mollis sem vel adipiscing. Aliquam quam eros, pulvinar eu dapibus non, tempor vitae orci. Cras suscipit viverra felis et mattis. 
              Donec massa enim, tempor id fringilla sit amet, ultrices in ante. In sagittis lectus eu risus dignissim bibendum. Mauris in pretium enim. In hac habitasse platea dictumst. Suspendisse lobortis, lectus vel semper imperdiet, est risus faucibus purus, et ultrices orci metus non arcu. Aliquam iaculis congue volutpat. </p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id = "foot_wrap">
    <div id = "footer">
      <div class = "copy">
        <p> &#169;2013 LOGO.</p>
      </div>
      <div id = "foot_bar">
        <ul>
          <li>home </li>
          <li>|</li>
          <li>about us </li>
          <li>|</li>
          <li>services</li>
          <li>|</li>
          <li>contact us</li>
        </ul>
      </div>
    </div>
  </div>
</div>

CSS：

body {
    margin:0px;
    font-family:Arial, Helvetica, sans-serif;
}
#container_wrap {
    width:100%;
    background-color:#000000;
}
#content_wrap {
    width:100%;
    float:left;
    background-color:#f9f9f9;
    border-bottom:black 1px solid;
    box-shadow: 4px 2px 4px 2px #ccc;
    -webkit-border-shadow: 4px 2px 4px 2px #ccc;
    -moz-border-shadow: 4px 2px 4px 2px #ccc;
}
#container {
    width:935px;
    margin:auto;
}
/* header and logo*/
#header_wrap {
    float:left;
    width:100%;
    background-color:#000000;
    height:100px;
}
#header, #navbar, #content {
    width:935px;
    margin:auto;
}
#content {
    float:left;
}
.logo {
    float:left;
    background:url(images/logo.png);
    width:202px;
    height:53px;
    background-position:top left;
    margin-top: 20px;
}
input[type=search] { 
       color: #FF0000;
    cursor: pointer;
    display: block;
    float: right;
    letter-spacing: 4px;
    margin-top: 10px;
    text-align: right;
    text-shadow: 0 0 2px #000000;
    width: 100px;
    word-spacing: 20px;             
}
/* header and logo*/
/* nav bar*/
#navbar {
    float:left;
    font-family:Arial, Helvetica, sans-serif;
}
#navbar ul {
    list-style-type:none;
    height:35px;
    margin:0 auto;
    padding-left:0px;
}
#navbar ul li {
    float:left;
    color:#1da7dd;
    list-style-type:none;
    padding: 9px 35px;
    font-size:18px;
}
#navbar ul li a {
    text-decoration:none;
}
#navbar ul li:hover, #nav ul li a:hover {
    color:#ffffff;
    background-color:#000;
    height:26px;
}
/* nav bar*/

/* content*/
#content h1 {
    font-size:32px;
    color:#404040;
}
#content h2 {
    font-size:12px;
    color:#1da7dd;
}
#content p {
    font-size:12px;
}
.slide {
}
.slide_header {
    background:#404040;
    background: rgb(69,72,77); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(69, 72, 77, 1) 0%, rgba(0, 0, 0, 1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(69, 72, 77, 1)), color-stop(100%, rgba(0, 0, 0, 1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(69, 72, 77, 1) 0%, rgba(0, 0, 0, 1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(69, 72, 77, 1) 0%, rgba(0, 0, 0, 1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(69, 72, 77, 1) 0%, rgba(0, 0, 0, 1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(69, 72, 77, 1) 0%, rgba(0, 0, 0, 1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000', GradientType=0 ); /* IE6-9 */
    float: left;
    width: 935px;
    padding-left: 10px;
    border-bottom:white 1px solid;
    height: 30px;
}
.slide_header h3 {
    font-size:12px;
    font-family:tahoma;
    color:white;
    margin: 7px 0 0;
    float:left;
}
.box {
    float:right;
    background-color:#999999;
    height: 30px;
    width: 30px;
}
.boxlight {
background-color:#00FF99;
}
#slide_header p {
    float:right;
    color:white;
    margin:0px;
    padding:0px;
    font-size:30px;
    padding: 0 10px 0 0;
}
.slide_text {
    float:left;
}
.slide_text p {
    padding-left: 20px;
    padding-right: 20px;
    color:#5e5e5e;
    line-height:1.4em;
}
/* content*/
/* footer*/
#footer {
    font-size:12px;
    width: 935px;
    margin:auto;
}
#footer .copy {
    float:left;
}
#foot_bar {
    float:right;
}
#foot_bar ul {
    float:right;
}
#foot_bar ul li {
    float:left;
    list-style-type:none;
    padding-left:10px;
}
#foot_wrap {
    width:100%;
    background-color:#dddddd;
    float: left;
    height: 200px;
}
/* footer*/
.hide {
    display:none;
}

Answer 1

隐藏除第一张幻灯片外的所有幻灯片：

slidetext.not(':first').addClass('hide');

要减少动画的抖动，请尝试在滑动前停止动画：

slidetext.stop().slideUp(200);
...
$(this).next().stop().slideDown(200);