jQuery点击滚动到最接近div.class和显示不工作

Question

嗨，有人知道我在这里做错了什么吗?

当您单击显示内容时，我希望它能找到与我要求的类最接近的div并滚动到它，但不工作…我是jquery新手，所以可能我做错了，但我认为我的逻辑是正确的哈哈

在控制台中出现错误:

无法读取未定义属性'top'

的例子:

$(document).ready(function() {
  // show examples
  $(document).on("click", ".show-syntax", function(e) {
    var ele = $(this).parent().closest(".render-syntax");
    // this will search within the section
    ele.show();
    $("html, body").animate({
      scrollTop: $(ele).offset().top
    }, 100);
    e.preventDefault();
  });
});

.render-syntax {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <a href="#" class="show-syntax">show content</a>
</div>
<div class="render-syntax">
  <p>content to show</p>
</div>
<div class="container">
  <a href="#" class="show-syntax">show content</a>
</div>
<div class="render-syntax">
  <p>content to show</p>
</div>
<div class="container">
  <a href="#" class="show-syntax">show content</a>
</div>
<div class="render-syntax">
  <p>content to show</p>
</div>

Answer 1

closest不通过兄弟姐妹;next做你需要的工作。简单地将代码中的closest替换为next，就会得到正确的行为。

var ele = $(this).parent().next(".render-syntax");

否则ele将没有任何元素，ele.offset()返回null，然后null没有top属性，因此出现错误。

Answer 2

问题不在于elec .offset()。Top是未定义的，是ele是未定义的

所以我打开JS Fiddle, f*****它直到它工作，现在我可以给你这个:

$(document).ready(function () {
    // show examples
    $(document).on("click", ".show-syntax", function (e) {
        var ele = $(this).parent().find(".render-syntax");
        // this will search within the section
        if (ele.css("display") == "none")
         {
    ele.show();
    $("html, body").animate({
      scrollTop: $(ele).offset().top
    }, 100);
    e.preventDefault();
             } else
                  {
                  ele.hide();
e.preventDefault();
                  }
  });
});

.render-syntax {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container"> <a href="#" class="show-syntax">show content</a>
    <div class="render-syntax">
        <p>content to show</p>
    </div>
</div>
<div class="container"> <a href="#" class="show-syntax">show content</a>
    <div class="render-syntax">
        <p>content to show</p>
    </div>
</div>
<div class="container"> <a href="#" class="show-syntax">show content</a>
    <div class="render-syntax">
        <p>content to show</p>
    </div>
</div>

我很抱歉做得不好JS{}的，但JS提琴只是不是我的编辑器:D