我有 2 个问题
1：
我对编码非常陌生，所以我向其他人展示了我的代码，并被告知我不应该使用 onclick，但不知道如何重写为其他内容。
2：
当我第一次启动代码或刷新它时，单击“Borderlands”按钮会显示子按钮“Borderlands#2”，当它第一次出现时，它比我希望的要低，但是一旦你再次单击它，它第二次出现它位置就是我想要的位置
https://codepen.io/MutantCreator/pen/xxQEeBJ?editors=1000
`
<head>
<title> Games </title>
</head>
<style>
.GamesButton {
position: fixed;
background-color: #494D49;
padding: 14px 10px;
border: 2px solid #000;
border-radius: 10px;
color: greenyellow;
text-align: center;
font-size: 16px;
margin: 5px -3px;
cursor: pointer;
background-image: url('GamingIcon.png');
background-repeat: no-repeat;
background-size: 27px;
background-position: -3px 0px;
}
.GamesButton:hover {
background-color: darkseagreen;
transition-duration: .2s;
}
.button {
background-color: #494D49;
padding: 14px 10px;
border: 2px solid #000;
border-radius: 20px;
color: greenyellow;
text-align: center;
font-size: 16px;
margin: 4px 30px;
cursor: pointer;
}
.subbutton {
background-color: #494D49;
padding: 14px 10px;
border: 2px solid #000;
border-radius: 20px;
color: greenyellow;
text-align: center;
font-size: 16px;
margin: 4px 30px;
margin-left: 50px;
cursor: pointer;
}
body {
background-image: url('CarbonBackground.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#BorderlandsDV2{
width: 80%;
right: 20px;
padding: 5% 0%;
background-color: #494D49;
margin: 1px 30px;
text-align: center;
color: greenyellow;
border: 2px solid #31CC22;
border-radius: 20px;
}
#RimWorldDV{
width: 80%;
padding: 5% 0%;
background-color: #494D49;
margin-top: .1%;
margin: 1px 30px;
text-align: center;
color: greenyellow;
border: 2px solid #31CC22;
border-radius: 20px;
}
#TarkovDV{
width: 80%;
padding: 5% 0%;
background-color: #494D49;
margin-top: .1%;
margin: 1px 30px;
text-align: center;
color: greenyellow;
border: 2px solid #31CC22;
border-radius: 20px;
}
#TerrariaDV{
width: 80%;
padding: 5% 0%;
background-color: #494D49;
margin-top: .1%;
margin: 1px 30px;
text-align: center;
color: greenyellow;
border: 2px solid #31CC22;
border-radius: 20px;
}
#LeftSideBar{
position: fixed;
left:0px;
top:-4px;
background-color: #494D49;
border: 2px solid #000;
width: 20px;
padding: 5px;
height: 100%;
}
</style>
<script>
function ShowAndHideBorderlandssubclasses() {
var x = document.getElementById("subbuttonebl");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function ShowAndHideBorderlands2() {
var x = document.getElementById("BorderlandsDV2");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function ShowAndHideRimWorld() {
var x = document.getElementById("RimWorldDV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function ShowAndHideTarkov() {
var x = document.getElementById("TarkovDV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function ShowAndHideTerraria() {
var x = document.getElementById("TerrariaDV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
<body style="background-color:black;">
<div id="LeftSideBar"></div>
<button onclick="OpenGames()" class="GamesButton"></button>
<li>
<button onclick="ShowAndHideBorderlandssubclasses()" class="button Borderlands">Borderlands</button>
</li>
<li>
<button ID=subbuttonebl style="display:none" onclick="ShowAndHideBorderlands2()"; class="subbutton Borderlands2";>Borderlands #2</button>
</li>
<div style="display:none" id="BorderlandsDV2">
Description for BorderLands
</div>
<li>
<button onclick="ShowAndHideRimWorld()" class="button RimWorld">RimWorld</button>
</li>
<div style="display:none" id="RimWorldDV">
Description for Rimworld
</div>
<li>
<button onclick="ShowAndHideTarkov()" class="button Tarkov">Tarkov</button>
</li>
<div style="display:none" id="TarkovDV">
Description for Tarkov
</div>
<li>
<button onclick="ShowAndHideTerraria()" class="button Terraria">Terraria</button>
</li>
<div style="display:none" id="TerrariaDV">
Description for Terraria
</div>
</body>
`
我得到了你问题的一部分，因为你想替换 onclick。例如，您可以向按钮添加事件侦听器，而不是使用 onclick
const btn = document.getElementById('your-btn-id') btn.addEventListener('click',someFunction)事件侦听器意味着您的按钮将侦听，直到发生某些事件为止，您可以访问https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
添加
ul似乎回答了这个问题但是，如果您是新手，您应该首先了解更多 javascript，至于您的第二个问题，我没有得到您想问的内容，您介意澄清一下吗？