jQuery单击并滚动到类不工作的下一个div

Question

我所做的这个简单的功能似乎不想打球，有人有什么想法吗？

我还遇到的错误是：

未定义的TypeError:无法读取未定义的属性“top”

不滚动或显示隐藏的div我已经要求。

​

$(document).ready(function() {
    // show examples
    $(document).on("click",".show-syntax",function(e){
    	$(this).next(".render-syntax").show();
    	$('html,body').animate({ scrollTop: $(this).next(".render-syntax").offset().top}, 'slow');
    	e.preventDefault();
    });

});

/**
 * GitHub theme
 *
 * @author Craig Campbell
 * @version 1.0.4
 */
pre {
    border: 1px solid #ccc;
    word-wrap: break-word;
    padding: 6px 10px;
    line-height: 19px;
    margin-bottom: 20px;
    position: relative;
}

code {
    border: 1px solid #eaeaea;
    margin: 0px 2px;
    padding: 0px 5px;
    font-size: 12px;
}

pre code {
    border: 0px;
    padding: 0px;
    margin: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

pre, code {
    font-family: Consolas, 'Liberation Mono', Courier, monospace;
    color: #333;
    background: #f8f8f8;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

pre, pre code {
    font-size: 13px;
}

pre .comment {
    color: #998;
}

pre .support {
    color: #0086B3;
}

pre .tag, pre .tag-name {
    color: navy;
}

pre .keyword, pre .css-property, pre .vendor-prefix, pre .sass, pre .class, pre .id, pre .css-value, pre .entity.function, pre .storage.function {
    font-weight: bold;
}

pre .css-property, pre .css-value, pre .vendor-prefix, pre .support.namespace {
    color: #333;
}

pre .constant.numeric, pre .keyword.unit, pre .hex-color {
    font-weight: normal;
    color: #099;
}

pre .entity.class {
    color: #458;
}

pre .entity.id, pre .entity.function {
    color: #900;
}

pre .attribute, pre .variable {
    color: teal;
}

pre .string, pre .support.value  {
    font-weight: normal;
    color: #d14;
}

pre .regexp {
    color: #009926;
}

pre .btn {
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    display: block;
    padding: 5px 10px;
    top: 0;
    right: 0;
    position: absolute;
    background: #eee;
    text-decoration: none;
    color: #333;
}

.render-syntax {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<pre>
          <a href="#" class="btn show-syntax">Show below example</a>
          <code data-language="html">

            <!-- .container is main centered wrapper -->
            <div class="container">

              <!-- columns should be the immediate child of a .row -->
              <div class="row">
                <div class="one column">One</div>
                <div class="eleven columns">Eleven</div>
              </div>

              <!-- just use a number and class 'column' or 'columns' -->
              <div class="row">
                <div class="two columns">Two</div>
                <div class="ten columns">Ten</div>
              </div>

              <!-- there are a few shorthand columns widths as well -->
              <div class="row">
                <div class="one-third column">1/3</div>
                <div class="two-thirds column">2/3</div>
              </div>
              <div class="row">
                <div class="one-half column">1/2</div>
                <div class="one-half column">1/2</div>
              </div>

            </div>

            <!-- Note: columns can be nested, but it's not recommended since Skeleton's grid has %-based gutters, meaning a nested grid results in variable with gutters (which can end up being *really* small on certain browser/device sizes) -->

          </code>
        </pre>

        <div class="render-syntax">

          <div class="container demo">
            <!-- columns should be the immediate child of a .row -->
            <div class="row">
              <div class="one column">One</div>
              <div class="eleven columns">Eleven</div>
            </div>

            <!-- just use a number and class 'column' or 'columns' -->
            <div class="row">
              <div class="two columns">Two</div>
              <div class="ten columns">Ten</div>
            </div>

            <!-- there are a few shorthand columns widths as well -->
            <div class="row">
              <div class="one-third column">1/3</div>
              <div class="two-thirds column">2/3</div>
            </div>
            <div class="row">
              <div class="one-half column">1/2</div>
              <div class="one-half column">1/2</div>
            </div>
          </div>

        </div>

​

Answer 1

.next将立即得到匹配元素集中的每个元素的同级。如果提供了选择器，则只有当与选择器匹配时，才会检索下一个同级。在本例中，它是'code‘标记。

这就是我会做的。用div环绕整个部分，如下所示：

<div class="parentcontainer">
    <pre>   
        <a href="#" class="btn show-syntax">Show below example</a>
        <code> ... </code>
    </pre>
    <div class="render-syntax">
        ...
    </div>
</div> 

然后你的jQuery就会像这样。

$(document).on("click",".show-syntax",function(e){
$next = $(this).parents(".parentcontainer").find('.render-syntax');
$next.show();
$('html,body').animate({ scrollTop: $next.offset().top},'slow');
e.preventDefault();
});

这是一个工作的小提琴。