Question

嗨，有没有人有任何想法，我在这里做错了什么？

当你点击显示内容时，我想让它找到最近的div与我要求的类并滚动到它但不起作用...我刚接触到jquery所以也许我做错了但我认为我的逻辑是正确的哈哈< / p>

在控制台中收到错误：

无法阅读财产＆＃39; top＆＃39;未定义的

示例：

＆＃13;

$(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();
  });

});

＆＃13;

.render-syntax {
  display: none;
}

＆＃13;

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

＆＃13;

Answer 1

closest没有经过兄弟姐妹; next完成你需要的工作。只需在代码中将closest替换为next即可为您提供正确的行为。

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

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

Answer 2

问题不在于ele.offset（）。top是未定义的，它是ele未定义的。

所以我打开了JS Fiddle，直到它工作了，现在我可以给你这个：

＆＃13;

$(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();
                  }
  });

});

＆＃13;

.render-syntax {
    display: none;
}

＆＃13;

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

＆＃13;

我很抱歉做得不好的JS {}，但JS Fiddle不是我的编辑：D

jQuery单击以滚动到cloest div.class并显示不起作用

2 个答案: