Question

我试图隐含一个在我之前提出的问题中提出的类切换解决方案，这是一个很好的解决方案，但是当我试图将其隐含在其他类中时，其他类则无法正常工作，我不知道为什么。

我仔细检查了所有拼写错误，并尝试编写较小的代码，发现它工作正常。

var click = 0
var bbtn = 0

var top2 = document.getElementById("top2");
var swoop3 = document.getElementById("swoop3");
var swoop4 = document.getElementById("swoop4");
var title2 = document.getElementById("title2");
var backbtn = document.getElementById("backbtn");

top2.onclick = function() {
    top2.classList.toggle("on");
    title2.classList.toggle("on");
    swoop3.classList.toggle("on");
    swoop4.classList.toggle("on");
}

.top2{
    background-color:orange;
    position:fixed;
    top:25%;
    left:0;
    height:25%;
    width:100%;
    border-top-left-radius:45px;
    border-bottom-left-radius:50px;
    border-bottom-style:outset;
    border-width:5px;
    transition: height .5s, top .5s,border-bottom-left-radius.5s,border-top-left-radius.5s;
}
.top2.on{
    top:0;
    height:100%;
    border-top-left-radius:0;
    border-bottom-left-radius:0;
}
   
.title2{
    color:white;
    font-size:40px;
    position:fixed;
    top:34%;
    left:25%;
    animation-name:title2;
    animation-duration:1s;
    animation-delay:1s;
    animation-timing-function:ease-in-out;
    animation-fill-mode:forwards;
    opacity:0;
    transition:top .5s;
}
.title2.on{
    top:5%;
}

@keyframes title2{
    100%{
        opacity:1;
    }
    
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
.swoop3{
    background-color:orange;
    position:fixed;
    top:50%;
    left:90%;
    height:52px;
    width:50px;
    transition:top .5s, height .5s;
}
.swoop3.on{
    top:100%;
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
.swoop4{
    background-color:white;
    position:fixed;
    top:50%;
    left:90%;
    height:52px;
    width:50px;
    border-top-right-radius:50px;
    border-top-style:inset;
    border-width:5px;
    transition:top .5s;
}
.swoop4.on{
    top:0;
}

我希望所有内容在点击时都能切换，但只有top2切换而没有其他

Answer 1

关于您的问题，没有太多要说的，因为您没有提供HTML视图的示例。但是您必须检查两件事。

如果您的HTML元素没有您在JavaScript中指定的ID，例如top2或swoop3，那么我建议您首先按照自己喜欢的方式在所有元素中添加它们这个：

<div id="top2"></div>
一旦有了，您还应该更改css样式以通过其id指向元素。这意味着您不必写.top2，而应写成#top2。您可以阅读有关CSS选择器here的更多信息。结果，您的css应该如下所示：

.top2 { background-color:orange; // ... other styles } .top2.on { // ... more styles }

为什么其他班级不切换？

1 个答案: