我正在尝试制作一个浮动的社交共享按钮，该按钮默认关闭，在单击触发器之前不会打开。我从互联网上得到了一些代码，但问题是社交图标在默认情况下是打开的，并覆盖了页面，我如何在默认情况下关上它？这是代码：
const trigger = document.querySelector("menu > .trigger");
trigger.addEventListener('click', (e) => {
e.currentTarget.parentElement.classList.toggle("open");
});menu {
--size: 2.1rem;
--radius: 6rem;
--padding: .5rem;
--bg-color: rgba(255, 255, 255, 0.9);
--fg-color: rgba(0, 0, 0, 0.7);
--hi-color: #12192c;
font-size: 29px;
position: fixed;
bottom: var(--padding);
right: var(--padding);
}
menu > * {
position: absolute;
display: grid;
place-content: center;
border-radius: 50%;
font-size: 29px;
background: var(--bg-color);
color: var(--fg-color);
text-decoration: none;
box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.6);
}
menu > .action {
--factor: 0;
width: 2.5rem;
height: 2.5rem;
right: calc(1.35 * var(--size));
bottom: calc(1.35 * var(--size));
opacity: 0;
transform: rotate(calc(-1 * var(--angle))) translateY(calc(-1 * var(--radius) * var(--factor))) rotate(var(--angle));
transition: transform 250ms ease-in-out, opacity 250ms ease-in-out, box-shadow 250ms ease-in-out, color 250ms ease-in-out;
}
menu > .action:hover, menu > .trigger:hover {
color: var(--hi-color);
box-shadow: 0px 0px 0px 0.35rem rgba(0, 0, 0, 0.2);
}
menu.open > .action {
--factor: 1;
font-size: 20px;
opacity: 1;
}
menu > .action:nth-child(1) {
--angle: 0deg;
transition-delay: 0ms;
}
menu > .action:nth-child(2) {
--angle: 30deg;
transition-delay: 50ms;
}
menu > .action:nth-child(3) {
--angle: 60deg;
transition-delay: 100ms;
}
menu > .action:nth-child(4) {
--angle: 90deg;
transition-delay: 150ms;
}
menu > .trigger {
width: calc(1.3 * var(--size));
height: calc(1.3 * var(--size));
bottom: 0;
right: 0;
font-size: 1.5rem;
transition: box-shadow 250ms ease-in-out, color 250ms ease-in-out;
}
menu > .trigger > i {
transition: transform 250ms ease-in-out;
}
menu.open > .trigger > i {
transform: rotate(-360deg);
}<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'><link rel="stylesheet" href="style.css">
</head>
<body>
<menu class="open">
<a href="#" class="action"><i class="fab fa-dribbble"></i></a>
<a href="#" class="action"><i class="fab fa-instagram"></i></a>
<a href="#" class="action"><i class="fab fa-twitter"></i></a>
<a href="#" class="action"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="trigger"><i class="fas fa-share"></i></a>
</menu>
<script src="script.js"></script>
</body>我在这里得到了代码：https://www.learningrobo.com/2021/11/floating-social-media-buttons-using.html?sc=1659803757099#c6812736580691024803
谢谢。
在html中将<menu class="open">更改为<menu class="">。
您不需要javascript，可以使用隐藏复选框打开/关闭菜单：
.hidden
{
display: none;
}
menu {
--size: 2.1rem;
--radius: 6rem;
--padding: .5rem;
--bg-color: rgba(255, 255, 255, 0.9);
--fg-color: rgba(0, 0, 0, 0.7);
--hi-color: #12192c;
font-size: 29px;
position: fixed;
bottom: var(--padding);
right: var(--padding);
}
menu > * {
position: absolute;
display: grid;
place-content: center;
border-radius: 50%;
font-size: 29px;
background: var(--bg-color);
color: var(--fg-color);
text-decoration: none;
box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.6);
}
menu > .action {
--factor: 0;
width: 2.5rem;
height: 2.5rem;
right: calc(1.35 * var(--size));
bottom: calc(1.35 * var(--size));
opacity: 0;
transform: rotate(calc(-1 * var(--angle))) translateY(calc(-1 * var(--radius) * var(--factor))) rotate(var(--angle));
transition: transform 250ms ease-in-out, opacity 250ms ease-in-out, box-shadow 250ms ease-in-out, color 250ms ease-in-out;
}
menu > .action:hover, menu > .trigger:hover {
color: var(--hi-color);
box-shadow: 0px 0px 0px 0.35rem rgba(0, 0, 0, 0.2);
}
menu > input[type="checkbox"]:checked ~ .action { /* changed */
--factor: 1;
font-size: 20px;
opacity: 1;
}
menu > .action:nth-child(2) { /* changed */
--angle: 0deg;
transition-delay: 0ms;
}
menu > .action:nth-child(3) { /* changed */
--angle: 30deg;
transition-delay: 50ms;
}
menu > .action:nth-child(4) { /* changed */
--angle: 60deg;
transition-delay: 100ms;
}
menu > .action:nth-child(5) { /* changed */
--angle: 90deg;
transition-delay: 150ms;
}
menu > .trigger {
width: calc(1.3 * var(--size));
height: calc(1.3 * var(--size));
bottom: 0;
right: 0;
font-size: 1.5rem;
transition: box-shadow 250ms ease-in-out, color 250ms ease-in-out;
cursor: pointer;
}
menu > .trigger > i {
transition: transform 250ms ease-in-out;
}
menu > input[type="checkbox"]:checked ~ .trigger > i { /* changed */
transform: rotate(-360deg);
}<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'><link rel="stylesheet" href="style.css">
</head>
<body>
<menu>
<input id="trigger" class="hidden" type="checkbox">
<a href="#" class="action"><i class="fab fa-dribbble"></i></a>
<a href="#" class="action"><i class="fab fa-instagram"></i></a>
<a href="#" class="action"><i class="fab fa-twitter"></i></a>
<a href="#" class="action"><i class="fab fa-facebook-f"></i></a>
<label for="trigger" class="trigger"><i class="fas fa-share"></i></label>
</menu>
<script src="script.js"></script>
</body>