jquery - 为用户选项创建菜单

Question

我设计了这个带有头像的面板。我想要做的是当您单击头像图片时弹出一个小菜单，其中包含诸如转到个人资料、添加 friend 、私信此人等选项。但我不确定如何去做，因为我对 jquery 和 css 还是新手。

因此，我正在寻找社区，看看我是否可以获得一些关于如何实现这一目标的想法或帮助。

这是我目前设置的 fiddle Example on jsfiddle

#recent-posts{
    background: #D2C198;
}
#posts{
    /*max-height: 90%;*/
    overflow-y: auto;
}
.posts-container{
    background-color: #D2C198;
    -webkit-box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.card-header{
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    padding: 0.35rem 1.25rem;
}
.forum-badge{
    float: left;
}
.forum-badge img, .last-poster-avatar img,
.reply-poster-avatar img, .reply-poster-guild-crest img{
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    object-fit: cover;
}
.forum-badge img{
    width: 100px;
    height: 100px;
}
.divider{
    border-bottom: 1px solid #222;
    padding-top: 5px;
}
.post-details{
    padding-top: 10px;
}
.last-poster{
    display: inline-flex;
    margin-left: 14px;
}
.post-description{
    padding-left: 30px;
    height: 25px;
    margin-left: 86px;
}
.last-poster-avatar{
    margin-right: 12px;
}
.last-poster-avatar img{
    width: 50px;
    height: 50px;
}
.post-statistics, .reply-poster-guild-detail{
    float: right;
    text-align: right;
}
.reply-poster-avatar, .reply-poster-detail, .reply-poster-guild-crest, .reply-poster-guild-detail{
    display: inline-block;
}
.reply-poster-avatar{
    vertical-align: top;
    float: left;
}
.reply-poster-avatar img{
    width: 75px;
    height: 75px;
}
.reply-poster-detail{
    /*width: 38.7%;*/
    margin-left: 5px;
    float: left;
}
.reply-poster-detail div{
    text-align: left;
}
.reply-poster-guild-crest{
    padding-top: 18px;
}
.reply-poster-guild-crest img{
    width: 40px;
    height: 40px;
}
.reply-poster-guild-detail,.reply-poster-detail{
    top: 11px;
    position: relative;
}
.reply-detail-container{
    width: 100%;
    text-align: center;
}
.replier-avatar-detail {
    float: left;
    display: inline-block;
}

.replier-avatar-detail,
.reply-poster-guild-detail {
    max-width: 50%;
    min-width: 45%;
}

<div id="recent-posts" class="card">
<div class="card-body">
    <div id="posts">
        <div class="card posts-container" id="a">
            <div class="card-header post" data-toggle="collapse" data-target="#post-replies" aria-expanded="true" aria-controls="post-replies">
                <div class="forum-badge">
                    <img src="https://i.postimg.cc/6QjQvk77/poedelve_copy.jpg" alt="Path of Exile">
                </div>
                <div class="post-container">
                    <div class="post-description">
                        <h5 class="mb-0"><div><!-- Post text goes here-->Sulphite WP farming is stupid as hell</div></h5>
                        <div class="divider"></div>
                    </div>
                    <div class="post-details">
                        <div class="last-poster">
                            <div class="last-poster-avatar">
                                <img src="https://i.postimg.cc/NfHQ0y7r/img_avatar.png" alt="Last Poster Avatar">
                            </div>
                            <div class="poster-detail-sm">
                                <div>Harold</div>
                                <div>3 hours ago</div>
                            </div>
                        </div>
                        <div class="post-statistics">
                            <div class="post-replies">
                                Replies <span>999</span>
                            </div>
                            <div class="post-views">
                                Views <span>999,999</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- replies section -->
            <div id="post-replies" class="collapse replies-container" aria-labelledby="a list of replies" data-parent="#posts"><!-- New replies must have dash and postnumber following post-replies e.g post-replies-223333 -->
                <div class="card-body">
                    <!-- replies -->
                    <div id="replies"><!-- New replies must have dash and postnumber following replies e.g replies-223333 -->
                        <div class="card replies-container">
                            <div class="card-header reply" data-toggle="collapse" data-target="#reply-content" aria-expanded="true" aria-controls="reply-content"><!-- New replies must have dash and postnumber following reply-content e.g reply-content-223333 -->
                                <div class="reply-detail-container">
                                    <div class="replier-avatar-detail">
                                        <div class="reply-poster-avatar">
                                            <img src="https://i.postimg.cc/cJHx0FDd/female-default.png" alt="Poster's Avatar">
                                        </div>
                                        <div class="reply-poster-detail">
                                            <div>Aurianna</div>
                                            <div>2 hours ago</div>
                                        </div>
                                    </div>
                                    <div class="reply-poster-guild-crest">
                                        <img src="https://i.postimg.cc/yYH7k1fQ/Dragon-design.jpg" alt="Guild Crest">
                                    </div>
                                    <div class="reply-poster-guild-detail">
                                        <div>House of Myrmadons</div>
                                        <div>Rank: Officer</div>
                                    </div>
                                </div>
                            </div>
                            <div id="reply-content" class="reply-message collapse" aria-labelledby="reply-header" data-parent="#replies"><!-- New replies must have dash and postnumber following reply-content e.g reply-content-223333 -->
                                <div class="card-body poster-body">
                                    Reply Content Here
                                </div>
                            </div>
                        </div>

                        <div class="card replies-container">
                            <div class="card-header reply" data-toggle="collapse" data-target="#reply-content1" aria-expanded="true" aria-controls="reply-content1"><!-- New replies must have dash and postnumber following reply-content e.g reply-content-223333 -->
                                <div class="reply-detail-container">
                                    <div class="replier-avatar-detail">
                                        <div class="reply-poster-avatar">
                                            <img src="https://i.postimg.cc/cJHx0FDd/female-default.png" alt="Poster's Avatar">
                                        </div>
                                        <div class="reply-poster-detail">
                                            <div>Chris</div>
                                            <div>2 hours ago</div>
                                        </div>
                                    </div>
                                    <div class="reply-poster-guild-crest">
                                        <img src="https://i.postimg.cc/yYH7k1fQ/Dragon-design.jpg" alt="Guild Crest">
                                    </div>
                                    <div class="reply-poster-guild-detail">
                                        <div>House of GGG</div>
                                        <div>Rank: CEO</div>
                                    </div>
                                </div>
                            </div>
                            <div id="reply-content1" class="reply-message collapse" aria-labelledby="reply-header" data-parent="#replies"><!-- New replies must have dash and postnumber following reply-content e.g reply-content-223333 -->
                                <div class="card-body poster-body">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
                                        accusantium amet autem corporis, deserunt eaque facilis laborum magni nobis
                                        officia officiis optio quibusdam, quisquam repellat velit. Molestiae non
                                        temporibus voluptatum!
                                    </div>
                                    <div>Ad consequuntur corporis cum cumque dolorem hic incidunt iure natus
                                        necessitatibus nihil obcaecati officiis quas quibusdam quis quo repellat
                                        reprehenderit ut, vel vitae, voluptatum. Accusamus ad obcaecati odio vero
                                        voluptas.
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card replies-container">
                            <div class="card-header reply" data-toggle="collapse" data-target="#reply-content3" aria-expanded="true" aria-controls="reply-content3"><!-- New replies must have dash and postnumber following reply-content e.g reply-content-223333 -->
                                <div class="reply-detail-container">
                                    <div class="replier-avatar-detail">
                                        <div class="reply-poster-avatar">
                                            <img src="https://i.postimg.cc/cJHx0FDd/female-default.png" alt="Poster's Avatar">
                                        </div>
                                        <div class="reply-poster-detail">
                                            <div>Chris</div>
                                            <div>2 hours ago</div>
                                        </div>
                                    </div>
                                    <div class="reply-poster-guild-crest">
                                        <img src="https://i.postimg.cc/yYH7k1fQ/Dragon-design.jpg" alt="Guild Crest">
                                    </div>
                                    <div class="reply-poster-guild-detail">
                                        <div>House of GGG</div>
                                        <div>Rank: CEO</div>
                                    </div>
                                </div>
                            </div>
                            <div id="reply-content3" class="reply-message collapse" aria-labelledby="reply-header" data-parent="#replies"><!-- New replies must have dash and postnumber following reply-content e.g reply-content-223333 -->
                                <div class="card-body poster-body">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
                                        accusantium amet autem corporis, deserunt eaque facilis laborum magni nobis
                                        officia officiis optio quibusdam, quisquam repellat velit. Molestiae non
                                        temporibus voluptatum!
                                    </div>
                                    <div>Ad consequuntur corporis cum cumque dolorem hic incidunt iure natus
                                        necessitatibus nihil obcaecati officiis quas quibusdam quis quo repellat
                                        reprehenderit ut, vel vitae, voluptatum. Accusamus ad obcaecati odio vero
                                        voluptas.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End replies -->
                </div>
            </div>

        </div>

如果有人能花点时间看看它并就如何完成这项工作提供一些想法或解决方案，那就太好了!

Answer 1

你可以在这里找到一些示例:

• > https://bootsnipp.com/snippets/featured/account-in-navbar
• > https://www.labw3.com/2014/08/round-avatar-with-drop-down-profiles-menu-code.html
• > https://blog.teamtreehouse.com/stylish-custom-user-settings-dropdown-menu-with-css