щелчок для показа 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>