Мое меню в JS закрывается, когда оно не должно ⇐ Html

[Anonymous]

Я пытался создать меню, которое закроется, когда вы нажимаете в другом месте, но когда я пытаюсь нажать что -нибудь в меню, это также закрывает меню, которое я не хочу. Ниже я предоставлю свой HTML и JS и CSS. Основная проблема - не круг, который не заставляет меню исчезнуть, а скорее теги, которые когда -то нажимают, заставляют меню уходить. >

Код: Выделить всё

const button = document.getElementById('circleButton');
const circle = document.getElementById('circle');
const mainContent = document.getElementById('mainContent');

button.addEventListener('click', () => {
if (circle.classList.contains('hidden')) {

circle.classList.remove('hidden');
requestAnimationFrame(() => {
requestAnimationFrame(() => {
circle.classList.add('show');
mainContent.classList.add('blur');
});
});
} else {

circle.classList.remove('show');
mainContent.classList.remove('blur');
setTimeout(() => {
circle.classList.add('hidden');
}, 300);
}
});

document.addEventListener('click', (e) => {
if (
e.target !== button &&
!circle.contains(e.target) &&
!circle.classList.contains('hidden')
) {

circle.classList.remove('show');
mainContent.classList.remove('blur');
setTimeout(() => {
circle.classList.add('hidden');
}, 300);
}
});< /code>
body { background-color: gray;  }

#circleButton {
position: fixed;
top: 20px;
right: 20px;
padding: 10px 20px;
background-color: transparent;
color: peachpuff;
border: 1px solid peachpuff;
cursor: pointer;
z-index: 10;
font-family: "Newsreader", serif;
font-style: italic;
}

.menu {
z-index: 50;
}

.circle {
position: fixed;
top: 50%;
right: -5%;
transform: translate(-50%, -50%) scale(0);
width: 60vmin;
height: 60vmin;
background-color: beige;
border-radius: 50%;
opacity: 0;
transition: all 0.3s ease-out;
pointer-events: none;
display: flex;
z-index: 51;
justify-content: center;
align-items: center;
}

.circle-inner {
position: absolute;
width: 100%;
height: 100%;
transition: all 0.3s ease;
pointer-events: none;
}

.circle-inner h1,
.circle-inner h2,
.circle-inner h3,
.circle-inner h4 {
font-size: 4.25em;
transform-origin: center;
z-index: 52;
font-family: "Newsreader", serif;
font-weight: 500;
position: absolute;
left: -150%;
transform: perspective(300px) rotate(5deg) rotateY(2deg) translateY(-50%);
transition: all 0.3s ease;
color: white;
}

.circle-inner a {
text-decoration: none;
color: inherit;
}

.circle-inner h1:hover,
.circle-inner h2:hover,
.circle-inner h3:hover,
.circle-inner h4:hover {
text-decoration: underline;
}

.circle-inner h1 {
top: -10%;
transform: perspective(300px) rotate(6deg) rotateY(20deg) rotateZ(10deg) translateY(-50%);
}

.circle-inner h2 {
top: 25%;
transform: perspective(300px) rotate(2.5deg) rotateY(15deg) rotateZ(5deg) translateY(-50%);
}

.circle-inner h3 {
top: 55%;
transform: perspective(300px) rotate(-2.5deg) rotateY(15deg) rotateZ(-5deg) translateY(-50%);
}

.circle-inner h4 {
top: 75%;
transform: perspective(300px) rotate(-3deg) rotateY(22deg) rotateZ(-10deg) translateY(-50%);
}

.hidden {
display: none;
}

.show {
display: block;
opacity: 1;
transform: translate(-50%, -50%) scale(1);
pointer-events: auto;
}

#mainContent {
transition: filter 0.3s ease-out;
margin: 0;
padding: 0;
}

#mainContent.blur {
filter: blur(6px);
}< /code>









Title




Menu



[url=#]Home[/url]
[url=#] About us[/url]
[url=#]Volumes[/url]
[url=#][h4]Submissions[/h4][/url]












VOLUME 1



Logo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse laoreet tincidunt metus, vitae accumsan odio ultrices et.  Nunc sed purus enim.

Подробнее здесь: https://stackoverflow.com/questions/794 ... upposed-to