javascript - 单击显示 div 但再次隐藏 + 保持 body 位置

Question

我制作个人资料表格，我点击了这个，表格显示但安装隐藏

如果表单出现而不会再次消失，我想单击链接，如果在表单外部单击，则从隐藏状态和网页位置保持不变，而不会向上滚动

我使用了代码

    $('.profile-link').click(function(e) {
        $(".profile-frm").addClass("show-prfrm");
    });


        $(document).mouseup(function(e) {
            var container = $(".profile-frm");
            var clickfuncion = $('.profile-link').click;
            if (container.is(':visible')) {
                // if the target of the click isn't the container nor a descendant of the container
                if (!container.is(e.target) && container.has(e.target).length === 0) {
                    e.preventDefault();
                    $('body').width($('body').width());
                    container.removeClass("show-prfrm");
                }
            }
        });

Answer 1

我认为唯一棘手的部分是在文档上放置一个点击处理程序，并在目标元素是按钮、菜单或其他任何元素时执行不同的操作。

const button = document.querySelector('button');
const menu = document.querySelector('#menu');

document.addEventListener('click', event => {
  menu.classList.add('hide');
  if (event.target == button || event.target == menu)
      menu.classList.remove('hide');
});

#menu {
  position: absolute;
  top: 50;
  border: 1px solid #555;
  background-color: #555;
  border-radius: 10px;
  height: 175px;
  width: 100px;
}

.hide {
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />

<button>Menu</button>
<div id="menu" class="hide"></div>