jQuery实现常见的隐藏与展示列表效果示例

下面我将为您详细讲解jQuery实现常见的隐藏与展示列表效果的攻略。

1.准备工作
首先，要使用jQuery的话，我们需要先引入jQuery库文件。在HTML文件中通过script标签引入，如下：

<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>

2.实现列表切换效果
接下来，我将为您演示两个常见的隐藏与展示列表效果。

示例1：点击切换展开/收起
下面的代码演示了如何通过点击实现列表展开和收起的效果。

<ul>
  <li>1. 第一个列表项</li>
  <li>2. 第二个列表项</li>
  <li>3. 第三个列表项</li>
  <li>4. 第四个列表项</li>
  <li>5. 第五个列表项</li>
</ul>

$(function() {
  $('li').click(function() {
    $(this).toggleClass('active');
  });
});

示例2：滑动切换展开/收起
下面的代码演示了如何通过滑动实现列表展开和收起的效果。

<ul>
  <li>1. 第一个列表项</li>
  <div class="content">
    <li>2. 第二个列表项的详细内容</li>
  </div>
  <li>3. 第三个列表项</li>
  <div class="content">
    <li>4. 第四个列表项的详细内容</li>
  </div>
  <li>5. 第五个列表项</li>
  <div class="content">
    <li>6. 第六个列表项的详细内容</li>
  </div>
</ul>

.content {
  display: none;
}

$(function() {
  $('li').click(function() {
    $(this).next('.content').slideToggle(500);
  });
});

3.总结
至此，我们已经学会了用jQuery实现常见的隐藏与展示列表效果的攻略。通过toggle、toggleClass、slideToggle等方法，我们可以轻松实现各种列表切换效果。