单击以显示div，但再次隐藏+保持身体位置

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>