Question

我正试图从头开始制作手风琴。这是我的问题。

问题＃1：但是，如何使用“nth child”属性显示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);

来自Scratch的Jquery Accordion是生涩的

1 个答案: