FAQs div中的jquery slideUp按钮

时间:2015-10-07 14:50:45

标签: javascript jquery

我的脚本效果很好:



$(document).ready(function() {
  $('#faqs li').each(function() {
    var tis = $(this),
      state = false,
      answer = tis.next('div').hide().css('height', 'auto').slideUp();
    tis.click(function() {
      state = !state;
      answer.slideToggle(state);
      tis.toggleClass('active', state);
    });
  });
});

#faqs h3 {
  cursor: pointer;
}
#faqs li.active {
  color: #d74646;
}
#faqs div {
  height: 0;
  overflow: hidden;
  position: relative;
}
#faqs div p {
  padding: 0;
  margin-bottom: 15px;
}
.slideup:hover {
  color: blue;
  cursor: pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="faqs">
  <ol>
    <li>
      <h3>Question</h3>
    </li>
    <div>
      <p>Lorem ipsum dolor sit amet, sit purto convenire deseruisse no. Vis ei unum similique reprimique, dicant nonumy no eos, has quis definiebas ullamcorper an. Ad cum eros voluptua. Ponderum voluptatum reprimique pro id, ne usu delenit invenire, et movet
        facilis perfecto quo.
        <br />
        <br />

        <span class="slideup">Slide up</span>
      </p>
    </div>
    <li>
      <h3>Question</h3>
    </li>
    <div>
      <p>Lorem ipsum dolor sit amet, sit purto convenire deseruisse no. Vis ei unum similique reprimique, dicant nonumy no eos, has quis definiebas ullamcorper an. Ad cum eros voluptua. Ponderum voluptatum reprimique pro id, ne usu delenit invenire, et movet
        facilis perfecto quo.
        <br />
        <br />

        <span class="slideup">Slide up</span>
      </p>
    </div>
    <li>
      <h3>Question</h3>
    </li>
    <div>
      <p>Lorem ipsum dolor sit amet, sit purto convenire deseruisse no. Vis ei unum similique reprimique, dicant nonumy no eos, has quis definiebas ullamcorper an. Ad cum eros voluptua. Ponderum voluptatum reprimique pro id, ne usu delenit invenire, et movet
        facilis perfecto quo.
        <br />
        <br />

        <span class="slideup">Slide up</span>
      </p>
    </div>
  </ol>
&#13;
&#13;
&#13;

问题是我想在常见问题解答div(向上滑动)底部有一个链接可以提升答案......我无法弄清楚如何做到这一点......任何问题帮助将不胜感激。

非常感谢!

0 个答案:

没有答案