Javascript 改进slideToggle jQuery代码

我正在制作一组可折叠的列表。我这样做是为了当用户单击某个类“toggle4”时，它们的列表会展开或折叠。以下是HTML：

<div>
  <h3 class="toggle1"><a href="#">Example 1 CC</a></h3>
  <div>
    <ul>
      <li class="lib1"><a href="#">Community College</a></li>
      <li class="lib1"><a href="#">Community College - Online</a></li>
    </ul>
  </div>
  <h3 class="toggle2"><a href="#">Example 2 CC</a></h3>
  <div>
    <ul>
      <li class="lib2"><a href="#">College of Liberal Arts</a></li>
      <li class="lib2"><a href="#">College of Liberal Arts Online</a></li>
    </ul>
  </div> 

我认为可能有人用

$（this）

来做这件事，但我没有找到它

我知道我可能每次都要写出

.hide（）

函数

但是有没有一种方法可以整合代码的其余部分呢？我可能需要编制多达20-25个列表，这将增加很多JQuery

---

提前谢谢

与其依赖每个切换类下的特定类名，不如

A） 有一个“toggle”类，每个实例都应用了一个click函数，但要将其环绕在h3标签和关联列表上。 B） 不要调用lib1、lib2等，而是使用类似$（this.find（“ul”）的东西，并对其应用toggle方法，将scrolltop:offset但应用于$（this）

HTML:

---

如果结构是一样的，这可能行得通……我想

CSS中的高度设置用于scrollTop测试

let$doc=$（'html，body'）；
$（'divulli'）.hide（）；
$（'h3'）。单击（函数（）{
变量$this=$（this）
$this.next（）.find（'li'）.slideToggle（）；
$doc.animate({
scrollTop:$this.offset（）.top
}, 2000);
});
h3+div{
高度：100vh；
}









您可以通过以下方式优化代码：

对所有h3使用相同的类

滑动切换li容器（ul）不是每个li

通过使用next（）单击h3，然后在此
上单击find（）（当前单击的h 3项目），滑动切换ul

停止Anniation（当多次单击停止上一次Anniation时）

请参阅下面的代码片段：


$（'.lib parent'）.hide（）；
$（'.toggle'）。单击（函数（）{
$（this）.next（）.find（'.lib parent'）.slideToggle（）；
$（'html，body'）.stop（）.animate({
scrollTop:$（this）.offset（）.top
}, 2000);
});






















好吧，这可能是该代码的修订版

例如，只需命名所有
切换的类即可

  <div style="display:none">
    <ul>
    <li class="lib1"><a href="#">Community College</a></li>
    <li class="lib1"><a href="#">Community College - Online</a></li>
   </ul>
  </div>

差不多

 <h3 class="toggle"><a href="#">Example 1 CC</a></h3>

下面是工作片段


$（'.toggle'）。单击（函数（e）{
$（this.next（）.slideToggle（600）；
})
.hide{
显示：无
}









我认为修订后的准则比列出更好的建议更合适，但仍然没有得到优化。每次单击时，您可以构建两个相同的
$（此）
对象，并且
$（'html，body'）
可以被缓存。您还可以缓存
$（'html，body'）
$('.lib').hide();
$('.toggle').click(function() {
    $(this).find('.lib').slideToggle();
    $('html, body').animate({
        scrollTop: $(this).offset().top
    }, 2000);
});

 <h3 class="toggle"><a href="#">Example 1 CC</a></h3>

  <div style="display:none">
    <ul>
    <li class="lib1"><a href="#">Community College</a></li>
    <li class="lib1"><a href="#">Community College - Online</a></li>
   </ul>
  </div>

$(this).next().slideToggle();