Question

我有一个动态创建评论的网页。评论最小化，可以使用“更多”链接进行扩展。当我单击更多链接时，页面跳转到页面顶部。我想这样做，当点击更多按钮时，会显示完整评论，页面仍保留在评论的位置。

HTML

<div tal:condition="not comment.pending_review">
                                <tr>
                                    <td>${ comment.account.email }</td>
                                    <td>
                                        <p class="more_text"
                                            style="width: 250px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis"
                                        >${ comment.comment }</p><a name="${ comment.id }" id="${ comment.id }" data-id="comment" class="more_link" href="#">more</a></td>
                                    <td><span class="star" tal:repeat="number [i for i in range( comment.star_rating )]">
                                            <span class="fa fa-star"></span>
                                        </span>
                                    </td>
                                </tr>
                            </div>

Javascript

$('.more_link').click(function(){
               $('.more_text').css({'width': '', 'white-space': '', 'overflow': '', 'text-overflow': ''});
               $(this).hide();
               var anchor_id = $(this).attr('name');
               location.hash = "#" + anchor_id;
           });

Answer 1

如果您只使用按钮而不是 a ，该怎么办？您可以删除“href =＃”部分，这会让您跳到顶部 - 只是一个建议：）

通过javascript扩展段落时锚定页面

1 个答案: