Question

我想要的是鼠标悬停在用户名上，它应该滑出CSS中display: none;的完整用户名。这很好，但是如果你单击加载更多按钮，这将通过AJAX加载剩余的注释并将其附加到现有的，但如果将鼠标悬停在其中一个用户名上，则会显示所有用户名的全名，前两个除外。

HTML：

<div class = 'rows'>
    <div class='feed_blocks'>
        <div class='feeds'>
        <!-- user post goes here -->
            <div class = 'comment_data'>
                <div class = 'per_comment'> <!-- two comments are displayed first -->
                    <a href = '#'><p class = 'usernames'>username</p></a>
                    <div class = 'commenter_details'>
                        <p> commenter_full_name </p>
                    </div>
                    <p>comments..</p>
                </div> <!-- end of div per_comment -->
                <div class = 'morecomments'><p> Load more </p> </div>
            </div><!-- end of div comment_data -->
        </div><!-- end of div feeds -->
    </div><!-- end of div feed_blocks -->
</div><!-- end of div rows -->

CSS：

.commenter_details {
background: cadetBlue;
color: white;
position: absolute;
padding: 3px;
margin-top: -10px;
margin-left: 10px;
z-index: 100;
display: none;
}

JQUERY：

$('.per_comment').on('mouseenter', ".usernames", function () {
    var $this = $(this);
    $this.parents('.per_comment').find('.commenter_details').slideDown(100);
});
$('.feeds').on('mouseleave', ".usernames", function () {
    var $this = $(this);
    $this.parents('.per_comment').find('.commenter_details').hide();
});

AJAX：

<div class = 'per_comment'> <!-- two comments are displayed first -->
    <a href = '#'><p class = 'usernames'>username</p></a>
    <div class = 'commenter_details'>
        <p> commenter_full_name </p>
    </div>
    <p>comments..</p>
</div> <!-- end of div per_comment -->

任何有助于解决此问题的帮助都将深受赞赏。

Answer 1

这对我有用：

$(document).on('mouseenter', ".usernames", function () {
    var $this = $(this);
    $this.parents('.per_comment').find('.commenter_details').slideDown(100);
});
$(document).on('mouseleave', ".usernames", function () {
    var $this = $(this);
    $this.parents('.per_comment').find('.commenter_details').hide();
});

http://jsfiddle.net/KHd8w/5/

jQuery slideDown（）无法正常使用AJAX结果

1 个答案: