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將獲得匹配元素集中每個元素的緊隨其后的同級元素。 如果提供了選擇器，則僅當與該選擇器匹配時才檢索下一個同級。 在這種情況下，它是“代碼”標簽。

這就是我要做的。 將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();
});

這是工作中的小提琴 。