javascript - 需要帮助调整自定义消息正文的能力

问题描述

我已经坐了两个星期了，感觉真的很难过。我几乎是一个极端的菜鸟，正在自学编码，所以我可以用 Twine (Sugarcube) 创建一个交互式游戏。这段代码中的一切都是完美的，我已经根据自己的喜好对其进行了自定义，但是我有一个明显的问题。每当您单击一封电子邮件时，它都会扩展为相同的邮件正文。无论您单击哪个消息预览，它都不会改变。

我的请求是任何人都可以帮助我或指出如何调整“EmailFull”div 类（如果需要调整的话）的方向，以便每次单击不同的消息时它都会改变。我将永远感激，因为我觉得无论我创建一个新的 div 类，重新排列顺序，还是创建一个新的 JS 函数，它都不会成功。

这是 CodePen 的完整代码：https ://codepen.io/Lance-Jernigan/pen/yJbXOK

HTML：

<div class="EmailsWrapper">
        <div class="EmailFull">
            <p>My name is Mark Cohan, and I'm the founder and CEO of Appalo. Appalo is one of the best mobile developer companies in Singapore.</p>
            <p>We have an app out right now.  You can check it out in the appstore.  However, I'm looking to take this app to the next level.</p>
            <p>I really would be excited to work together.  Please do let me know</p>
        </div>
            <div class="EmailTitle">
                <p class="EmailTime">11:12 AM</p>
                <h1>Sergey Zolkin</h1>
                <h2>New Project Inquiry</h2>
                <p class="EmailPreview">Hi Matt! Are you available for...</p>
            </div>
        </div>
<div class="Email">
            <div class="EmailTitle">
                <p class="EmailTime">8:13 AM</p>
                <h1>Slack</h1>
                <h2>Notiications from the team..</h2>
                <p class="EmailPreview">Hi Matt, You have a new message...</p>
            </div>
        </div>
            <div class="EmailTitle">
                <p class="EmailTime">7:24 AM</p>
                <h1>Clark from Invision</h1>
                <h2>Weekly digest: How to design...</h2>
                <p class="EmailPreview">Plus why product thinking is the...</p>
            </div>

CSS：

    .EmailsWrapper {
            height: 100%;
            margin: auto;
            position: relative;
            background: linear-gradient(to bottom, #313a5a 0%,#424a6b 100%);
        }

            .EmailFull {
                position: absolute;
                top: 115px;
                background: #f2f2f2;
                height: 100%;
                padding: 0px 25px;
                color: rgba(0, 0, 0, .6);
                max-height: 0px;
                overflow: hidden;
                transition: all .3s;
            }

                .EmailFull.active {
                    max-height: 453px;
                    overflow: scroll;
                }

                .EmailFull p {
                    line-height: 1.6em;
                }
            
             .Email {
                box-sizing: border-box;
                border-radius: 3px;
                background: rgba(255, 255, 255, .1);
                padding: 5px;
                width: 100%;
                max-width: 90%;
                max-height: 100px;
                overflow: hidden;
                margin: 3px auto;
                transition: all .3s;
                display: flex;
                flex-wrap: wrap;
                cursor: pointer;
                position: relative;
                opacity: 1;
            }

                .Email.active {
                    margin-top: -76px;
                    padding: 10px 0px;
                    background: #21294a;
                    color: #fff;
                    z-index: 15;
                    max-width: 100%;
                    cursor: initial;
                    border-radius: 0px;
                }

                .Email.deactive {
                    max-height: 0px;
                    padding: 0px;
                    margin: 0px auto;
                    opacity: 0;
                }

JS：

$(function() {
    $(".Email").on("click", function() {
        $(this).addClass("active")
        $(".Email").not(".active").addClass("deactive")
        $(".hamburger").addClass("active");
        $(".EmailFull").addClass("active");
        $(".headerLabel h1").text("MESSAGE");
    })
    $(".hamburgerWrapper").on("click", function() {
        $(".Email.active").removeClass("active")
        $(".Email.deactive").removeClass("deactive")
        $(".hamburger").removeClass("active");
        $(".EmailFull").removeClass("active");
        $(".headerLabel h1").text("INBOX");
    })
})

标签： javascripthtmlcss

javascript - 需要帮助调整自定义消息正文的能力

问题描述

解决方案

推荐阅读