弹窗打开/关闭功能单独正常但联动失效，求问原因及解决方法

当前实现的弹窗菜单，单独测试打开、关闭功能均正常，但连续操作（打开后点击关闭）时失效。实际根源并非弹窗被"卡住"，而是事件冒泡机制导致的冲突：

你的.mmovel弹窗容器直接嵌套在触发按钮容器.menumovel内部，点击关闭按钮（.mfechar）时，点击事件会向上传递到父元素.menumovel，触发它的点击事件——也就是再次执行.mmovel.show()，所以刚隐藏的弹窗立刻又被显示，看起来像是关闭失效。

方案1：调整DOM结构（推荐） #

将弹窗容器.mmovel从.menumovel内部移出，彻底避免事件冒泡的影响：

<div class="menumovel"><!-- 触发按钮容器 --></div>
<div class="mmovel"><!-- 弹窗容器 -->
    <p class="mfechar">X</p>
    <ul>
        <li>Logo</li>
        <?php if ( is_user_logged_in() ): ?>
        <li class="quemsou">Olá <?php 
            global $current_user;
            get_currentuserinfo();
            echo $current_user->user_login;
        ?></li>
        <li><a href="<?php echo wp_logout_url( $_SERVER['REQUEST_URI'] ); ?>">Sair</a></li>
        <?php else: ?>
        <li class="clickentrar">Entrar</li>
        <?php endif; ?>
        <li>Registar</li>
        <li>Serviços</li>
        <li>Sobre</li>
        <li>Area Cliente</li>
        <li>Contatos</li>
    </ul>
</div>

<script>
$(".mmovel").hide();
$(".menumovel").click(function(){
    $(".mmovel").show();
});
$(".mfechar").click(function(){
    $(".mmovel").hide();
});
</script>

<style>
.mfechar{
    position:absolute;
    width:50px;
    height:50px;
    top:60px;
    right:30px;
    font-size:30px;
    cursor: pointer; /* 增加鼠标指针提示，提升交互体验 */
}
.menumovel{
    position:absolute;
    width:50px;
    height:50px;
    top:60px;
    right:30px;
    cursor: pointer; /* 增加鼠标指针提示 */
}
.menumovel::before{
    content:"☰";
    position:absolute;
    width:50px;
    height:50px;
    font-size:30px;
}
.mmovel{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:999;
    background:green;
}
</style>

方案2：阻止事件冒泡 #

若不想调整DOM结构，可在关闭按钮的点击事件中添加阻止冒泡的代码：

$(".mfechar").click(function(event){
    event.stopPropagation(); // 阻止事件向上传递到父元素
    $(".mmovel").hide();
});

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