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

[Anonymous]

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








Title



Menu



Home
About us
Volumes

Submissions

VOLUME 1



Logo

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









< /code>

js: < /p>
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>
css: < /p>
#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);
}


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