Question

我尝试使用jQuery创建手风琴，我的代码在下面分享。

＆＃13;

$(document).ready(function() {
  
  $('#initial .section-content').slideDown();
  
  $('h2').click(function() {
    $('.section-content').slideUp();
    $(this).siblings('.section-content').slideDown();
  });
})

＆＃13;

.section-content {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="initial">
  <h2>Section 1</h2>
  <p class="section-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus.
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus.
  </p>
</div>
<div>
  <h2>Section 2</h2>
  <p class="section-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus.
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus.
  </p>
</div>
<div>
  <h2>Section 3</h2>
  <p class="section-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus.
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus.
  </p>
</div>
<div>
  <h2>Section 4</h2>
  <p class="section-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus.
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus.
  </p>
</div>

＆＃13;

在这个手风琴中，当我点击每个标题时，它会关闭其他部分打开与此部分相对应的内容。

我想为这支手风琴添加更多功能。当我点击标题时，相应的内容将被扩展。之后，我想滚动窗口，使我点击的标题显示在屏幕顶部。我该如何实现此功能？

Answer 1

试试这个

$('h2').click(function() {
    $('.section-content').slideUp();
    $(this).siblings('.section-content').slideDown('slow', function(){
       $('html, body').animate({
          scrollTop: $(this).siblings('.section-content').offset().top
       }, 500);
    });
});

Answer 2

如果你想在手风琴的开启/关闭之后滚动，那么你必须使用调用slideDown或slideUp的回调功能。
slideDown的文档位于：http://api.jquery.com/slidedown/
对于slideUp：http://api.jquery.com/slideup/

代码可能如下所示：

$('h2').click(function() { $('.section-content').slideUp(); $(this).siblings('.section-content').slideDown('slow', function() { $('html, body').animate({ scrollTop: $(this).siblings('h2').offset().top }, 500); }); });

上面的例子工作的小提琴可以在这里找到： https://jsfiddle.net/s48gx6Lf/

将元素放在屏幕顶部

2 个答案: