Question

点击时，我有3个元素显示/隐藏其内容。

我的目标：点击元素1，将整个div带入视图。如果我然后单击元素2，则第二个div进入视图。

当前发生的事情：点击元素1，将整个div带入视图。向下滚动一下并单击元素2，它向上滚动以显示整个第一个div而不是第二个div。

我认为问题在于我将.content作为scrollTop函数中的参数，但我还没有弄明白我应该在那里解决这个问题。

我的jquery / javascript在这里：

$(document).ready(function(){
    $(".flippy1").click(function(){

        $(this).parent().children(".content").slideToggle(); //toggles the content

        setTimeout(function(){ 
        $('body').animate({scrollTop:$('.content').offset().top},200) 
        }, 200);   //delay of 200 ms to let the entire slidetoggle animation finish, then scrolls to the top of the div

    });
});

HTML：

<div class="container">
    <div class="row">
      <div class="col-md-12">

         <div class="flippy1">
            <h2>Experience</h2>
         </div>

         <div class="content">
           content goes here
         </div>

     </div>
  </div>
   <div class="row">
      <div class="col-md-12">

         <div class="flippy1">
            <h2>Dogs</h2>
         </div>

         <div class="content">
          contents goes here
         </div>
     </div>
  </div>
  <div class="row">
     <div class="col-md-12">
        <div class="flippy1">
            <h2>Cats</h2>
        </div>

        <div class="content">
         more content
        </div>
      </div>
   </div>
</div>

Answer 1

我的解决方案是在动画$("html,body")属性时使用scrollTop。有些浏览器不能单独使用$("body")，但我对此没有正确的解释。

第二个问题是您在超时功能中引用$(".content")。这会将scrollTop设置为.content的第一个匹配项，而不一定是单击的匹配项。但是，我们可以做得更好：

第三，并不是一个问题，而是一个更好的处理方法，是使用slideToggle的回调函数：此函数是仅在 slideToggle完成后才执行的代码。这样做而不是设置超时。超时长度是任意的，例如在一个非常老的，非常慢的浏览器中，200ms的持续时间可能不够长。

请参阅以下更新：

$(document).ready(function(){ $(".flippy1").click(function(){ $(this).parent().children(".content").slideToggle( function(){ $('body,html').animate({scrollTop: $(this).offset().top},200); }); }); });

如果您想滚动到包含标题的顶部，只需再次抓住父级，然后使用其 offset。

这一行：

$('body,html').animate({scrollTop: $(this).offset().top},200);

变为：

$('body,html').animate({scrollTop: $(this).parent().offset().top},200);

此处示例：https://jsfiddle.net/nb0fvu3u/

此处的父示例：https://jsfiddle.net/nb0fvu3u/1/

如何使用jquery将不同的元素带入视口？

1 个答案: