在幻灯片中切换如何自动滚动到带有类的 li

in slideToggle how to auto roll to a li with a class

本文关键字：li 滚动 何自动 幻灯片      更新时间：2023-09-26

http://jsfiddle.net/sdgwbyv8/

我使用 JQUERY 幻灯片切换打开一个div

有很多行。

我需要当用户单击#list_button或单击之前。

div 滚动条将自动滚动到<li class="now> 

<h1 id="list_button">open</h1>
<div class="list">
    <ul>
        <li>AAAAA</li>
        <li>BBBBB</li>
        <li>CCCCC</li>
        <li>DDDDD</li>
        <li>EEEEE</li>  
        <li>DDDDD</li>
        <li>EEEEE</li>  
        <li>DDDDD</li>
        <li>DDDDD</li>
        <li>EEEEE</li>  
        <li>DDDDD</li>
        <li>DDDDD</li>
        <li>EEEEE</li>  
        <li>DDDDD</li>
        <li class="now">EEEEE</li>  
        <li>DDDDD</li>
        <li>EEEEE</li>        
    </ul>
</div>
$( "#list_button" ).click(function() {
        $( ".list" ).slideToggle( "fast" );
    });

$( "#list_button" ).click(function() {
   $( ".list" ).slideToggle( "fast" , function() {
          var scrollTo = $(".now");
          $( ".list" ).animate({
          scrollTop: scrollTo.offset().top - $( ".list" ).offset().top + $( ".list" ).scrollTop()
        });
    });
});

打开时，这应该滚动到所需的目标。

打开列表，然后仅在列表完成打开动画后滚动到所需的列表项。请注意，接受答案中的scrollTo等于页面上类为now的任何项目，而我的答案仅限于所选列表中类为now的任何列表项。

$( "#list_button" ).click(function() {
    $( ".list" ).slideToggle( "fast", function(){
      $(this).animate({
        scrollTop: $(this).find('li.now').offset().top
      },500);
    });
 });

吉斯菲德尔

相关文章：