jQuery实现画面的展开、收起和停止

可以使用jQuery的slideToggle()方法来实现画面的展开和收起效果，并使用stop()方法来停止正在进行的动画效果。

HTML代码：

<div class="box">
  <div class="content">
    <p>这是要展示的内容。</p>
  </div>
  <a href="#" class="toggle">展开/收起</a>
</div>

CSS代码：

.box {
  width: 300px;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

.content {
  display: none;
}

jQuery代码：

$(document).ready(function() {
  // 点击“展开/收起”链接
  $('.toggle').click(function(event) {
    event.preventDefault();
    var content = $(this).prev('.content');
    // 切换展开/收起状态
    $(this).text(content.is(':visible') ? '展开' : '收起');
    // 切换内容显示/隐藏
    content.stop().slideToggle();
  });
});

解释：

首先，使用jQuery的.ready()方法在文档加载完成后执行代码。

然后，使用.click()方法为“展开/收起”链接绑定点击事件。

在事件处理程序中，使用.preventDefault()方法阻止链接的默认行为（即跳转到链接的href属性指定的页面）。

使用.prev()方法获取链接前面的内容区域。

使用.is(':visible')方法判断内容区域是否可见，如果可见，则切换链接文本为“展开”，否则切换为“收起”。

最后，使用.stop()方法停止正在进行的动画效果，使用.slideToggle()方法切换内容区域的展开/收起状态。