Question

我正在创建一组可折叠的列表。我已经做到这一点，当用户点击某个类“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>

现在我想知道是否有更好的方法来编写jquery代码而不是一遍又一遍地重复它，因为我构建了更多列表。

$('.lib1').hide();
$('.toggle1').click(function() {
    $('.lib1').slideToggle();
    $('html, body').animate({
        scrollTop: $(".toggle1").offset().top
    }, 2000);
});
$('.lib2').hide();
$('.toggle2').click(function() {
    $('.lib2').slideToggle();
    $('html, body').animate({
        scrollTop: $(".toggle2").offset().top
    }, 2000);
});

我认为可能会使用$(this)来做这件事，但我找不到它。

我知道我每次都可能要写出.hide()函数。

但有没有办法整合剩下的代码？我可能不得不补充20-25 lists，这就像我正在做的那样加起来很多JQuery。

提前谢谢。

Answer 1

不是依赖于每个切换类下的特定类名，而是

更好

A）有一个＆＃34;切换＆＃34;具有应用于每个实例的单击函数的类，但将其包装在h3标签和关联列表中。 B）不要调用lib1，lib2等，而是使用$（this）.find（＆＃34; ul＆＃34;）之类的东西，并将toggle方法应用于此，而scrolltop：offset则应用于$（this）。

HTML：

<div>
  <span class="toggle">
  <h3><a href="#">Example 1 CC</a></h3>
  <div>
    <ul>
      <li class="lib"><a href="#">Community College</a></li>
      <li class="lib"><a href="#">Community College - Online</a></li>
    </ul>
  </div>
  </span>
  <span class="toggle">
  <h3><a href="#">Example 2 CC</a></h3>
  <div>
    <ul>
      <li class="lib"><a href="#">College of Liberal Arts</a></li>
      <li class="lib"><a href="#">College of Liberal Arts Online</a></li>
    </ul>
  </div> 
  </span>
</div>

JS：

$('.lib').hide();
$('.toggle').click(function() {
    $(this).find('.lib').slideToggle();
    $('html, body').animate({
        scrollTop: $(this).offset().top
    }, 2000);
});

Answer 2

如果结构相同，这可能有效......我想。

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

carrierwave

let $doc = $('html, body');
$('div ul li').hide();
$('h3').click(function() {
    var $this = $(this)
    $this.next().find('li').slideToggle();
    $doc.animate({
        scrollTop: $this.offset().top
    }, 2000);
});

h3 + div{
   height: 100vh;
}

Answer 3

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

为所有h3使用相同的课程
幻灯片切换li容器（ul）不是每个li，
使用next（）点击h3然后在this上找到（）（当前点击的h 3项目）
停止动画（当多次点击停止上一次动画时）

见下面的代码：

$('.lib-parent').hide();
$('.toggle').click(function() {
    
    $(this).next().find('.lib-parent').slideToggle();
    
    $('html, body').stop().animate({
        scrollTop: $(this).offset().top
    }, 2000);
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h3 class="toggle"><a href="#">Example 1 CC</a></h3>
  <div>
    <ul class="lib-parent">
      <li class="lib"><a href="#">Community College</a></li>
      <li class="lib"><a href="#">Community College - Online</a></li>
      <li class="lib"><a href="#">Community College - Online</a></li>
    </ul>
  </div>
  <h3 class="toggle"><a href="#">Example 2 CC</a></h3>
  <div>
    <ul class="lib-parent">
      <li class="lib"><a href="#">College of Liberal Arts</a></li>
      <li class="lib"><a href="#">College of  Arts Online</a></li>
      <li class="lib"><a href="#">College of Liberal Arts</a></li>
      <li class="lib"><a href="#">College of  Arts Online</a></li>
      <li class="lib"><a href="#">College of Liberal Arts</a></li>
      <li class="lib"><a href="#">College of  Arts Online</a></li>
      <li class="lib"><a href="#">College of Liberal Arts</a></li>
      <li class="lib"><a href="#">College of  Arts Online</a></li>
      <li class="lib"><a href="#">College of Liberal Arts</a></li>
      <li class="lib"><a href="#">College of  Arts Online</a></li>
      <li class="lib"><a href="#">College of Liberal Arts</a></li>
      <li class="lib"><a href="#">College of  Arts Online</a></li>
      <li class="lib"><a href="#">College of Liberal Arts</a></li>
      <li class="lib"><a href="#">College of  Arts Online</a></li>
      
    </ul>
  </div>

Answer 4

嗯，这可以是代码的修订版本

只需将所有<h3> toggle的类命名为

像

这样的东西

 <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>

最后，您可以使用此脚本切换显示onclick事件

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

以下是工作代码段

＆＃13;

$('.toggle').click(function(e) {
    $(this).next().slideToggle(600);
    
  })

＆＃13;

.hide{
 display : none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
  <h3 class="toggle"><a href="#">Example 1 CC</a></h3>
  <div class="hide">
    <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 2 CC</a></h3>
  <div class="hide">
    <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>

＆＃13;

改进slideToggle jQuery代码

4 个答案: