如何修复消息框中新消息按钮的交互逻辑：仅打开不关闭

核心修改思路 #

• 给iconMessage（New Message按钮）添加独立的打开逻辑，仅执行显示消息框操作，不切换关闭状态
• 阻止按钮点击事件冒泡到父容器，避免触发父容器的切换逻辑
• 保留原容器的切换功能，不影响其他交互

修改后的代码 #

JavaScript 部分

const msgg = document.getElementById("msgg");
const iaup = document.getElementById("iaup");
const iado = document.getElementById("iado");
const msgc = document.getElementById("msgc");
const msgarea = document.getElementById("msgarea");
const nmsg = document.getElementById("nmsg")

// 原有的消息框切换逻辑，保持不变
function sMessages1() {
    msgg.classList.toggle("messageBox2");
    iaup.classList.toggle("vdn");
    iado.classList.toggle("vib");
    msgarea.classList.toggle("vib")
}

// New Message按钮专属的打开逻辑
function openMessageArea() {
    // 仅当消息框未打开时执行打开操作
    if (!msgarea.classList.contains("vib")) {
        msgg.classList.add("messageBox2");
        iaup.classList.add("vdn");
        iado.classList.add("vib");
        msgarea.classList.add("vib");
    }
    // 阻止事件冒泡到父容器，避免触发切换逻辑
    event.stopPropagation();
}

// 绑定按钮点击事件
nmsg.addEventListener('click', openMessageArea);

HTML 部分（仅需保持结构，无需修改）

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css"/>

<div class="messageBox" id="msgg">
    <div class="messageContainer" id="msgc" onclick="sMessages1()">
        <div class="messageText">
            Messages
        </div>
        <div class="Icons">
            <div class="iconMessage" id="nmsg">
                <i class="fa-solid fa-envelope" style="font-size: 13px;color: pink;"></i>
                <i class="fa-solid fa-plus" style="font-size: 9px;font-weight: bolder;position: absolute;left: 18px;top: 0px;"></i>
            </div>
            <div class="iconMoreMessage">
                <i class="fa-solid fa-angle-up" id="iaup" style="font-size: 13px;"></i>
                <i class="fa-solid fa-angle-down" id="iado" style="font-size: 13px;display: none;"></i>
            </div>
        </div>
    </div>
    <div class="messageArea" id="msgarea">
    </div>
</div>

CSS 部分（无需修改）

body {
    background-color: rgba(0,0,0,0.5);
}
.messageBox {
    border-radius: 10px;
    position: fixed;
    right: 5%;
    bottom: 0px;
    width: 250px;
    height: 40px;
    transition: 200ms;
}
.messageBox2 {
    bottom: 100px;
    border-radius: 10px;
    position: fixed;
    right: 5%;
    width: 300px;
    height: 40px;
}
.messageContainer {
    border: 1px solid lightgray;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.messageText {
    padding-left: 12px;
    font-size: 16px;
}
.Icons {
    display: flex;
    position: relative;
    padding-right: 12px;
}
.iconMessage {
    display: flex;
    align-items: center;
    border-radius: 50%;
    padding: 6px 7px;
    margin-right: 20px;
    cursor: pointer;
}
.iconMessage:hover {
    color: darkorange;
    background-color: rgba(255,165,0,0.1);
}
.iconMoreMessage {
    display: flex;
    align-items: center;
    border-radius: 50%;
    padding: 0px 7px;
}
.iconMoreMessage:hover {
    color: darkorange;
    background-color: rgba(255,165,0,0.1);
}

.messageArea {
    display: none;
    border-right: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
    border-left: 1px solid lightgray;
    width: 300px;
    height: 100px;
    background-color: white;
}
.vdn {
    display: none !important;
}
.vib {
    display: inline-block !important;
}

关键说明 #

1. 专属打开逻辑：openMessageArea函数先判断消息框是否已打开，仅在未打开时执行添加类的操作，确保点击按钮不会关闭消息框
2. 阻止事件冒泡：event.stopPropagation()避免点击按钮时触发父容器的切换函数，保证按钮逻辑独立
3. 保留原有交互：消息标题栏和上下箭头按钮的切换功能不受影响，依然可以正常切换消息框状态

内容的提问来源于stack exchange，提问作者NickNameNeeded