在普通JavaScript中切换多个类

Posted 2021-04-28

嘿，我似乎在画布外导航中遇到了一些问题。我正在尝试在一个事件侦听器上切换两个类，它与nav菜单一起使用，但没有在.Site元素上切换类。我在做什么错？

我正在尝试让.Site元素添加一个类，以将margin-left设置为20%并将width设置为80%，而关闭画布菜单从以下位置获取width的20%： 0。导航有效，但是.Site切换不起作用。

html

<nav class="SiteNavigation">
    <ul class="nav">
        <li><a href="#">HOME</a></li>
        <li><a href="#">SERVICES</a></li>
        <li><a href="#">THEMES</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
</nav>
<div class="Site">
    <header class="SiteHeader">
        <button class="menuButton">
            <i class="fas fa-bars"></i>
        </button>
        <div class="siteBranding">
            <h1 class="textCenter">TEOTIHUACAN DESIGN</h1>
            <p class="textCenter">Quality Websmiths</p>
            <button class="btn --btnLink alignCenter"><a href="#main"><i class="fas fa-arrow-circle-down fa-2x"></i></a></button>
        </div>
    </header>
    <main id="main" class="SiteMain">
        <div class="mainInner">
            <article class="articleMain">
                <header class="articleHeader">
                    <h1 class="--textCenter">Niltze! (it means Hello!)</h1>
                </header>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere molestiae ex qui laudantium, nobis voluptate quaerat suscipit veritatis ducimus animi corporis, perspiciatis aliquam aliquid! Corrupti dicta magnam autem labore quo.</p>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. In obcaecati, consequatur sed officiis deleniti maxime reprehenderit possimus fugiat officia quasi, nemo doloremque numquam pariatur doloribus! Tempora facere harum earum provident nulla, ipsam quos animi minus esse nihil! Tempore officiis possimus facilis sint, vel id ipsam obcaecati dolor dolorem suscipit molestias aliquam quaerat itaque distinctio beatae voluptates nostrum nesciunt voluptate? Quae temporibus vitae molestias magnam sed, nostrum ducimus nulla, totam ad nihil aut magni asperiores natus esse quasi omnis quod voluptatem? Molestiae, possimus eos quis eveniet rerum tenetur aliquam ullam nemo? Laudantium ratione perspiciatis possimus quos quaerat quibusdam, labore quod deserunt temporibus assumenda ipsam quasi repudiandae maiores quia sed architecto culpa nam cum veritatis fugiat itaque! Accusantium eos velit sunt quia soluta perspiciatis laudantium iste, neque minus consequuntur tempora incidunt aliquid!</p>
            </article>
        </div>
    </main>
    <section class="SiteColophon">
        <div class="colophonInner">
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque laborum ipsam dolores nisi nesciunt. Doloribus recusandae rem aliquam veniam, soluta repellat earum, alias accusamus ipsam dolorum quo voluptatum dolor dolore.</p>
        </div>
    </section>
    <footer class="SiteFooter">
        <div class="footerInner">
            <p class="--mousePrint textCenter">Copyright &copy; 2020 Teotihuacan Design. Powered by WordPress</p>
            <div class="socialMedia">
                <button class="btn --btnLink socialMediaButton"><i class="fab fa-facebook"></i></button>
                <button class="btn --btnLink socialMediaButton"><i class="fab fa-twitter"></i></button>
                <button class="btn --btnLink socialMediaButton"><i class="fab fa-instagram"></i></button>
                <button class="btn --btnLink socialMediaButton"><i class="fab fa-behance"></i></button>
                <button class="btn --btnLink socialMediaButton"><i class="fab fa-dribbble"></i></button>
            </div>
        </div>
    </footer>
</div>

CSS

@use postcss-nested;
@use postcss-simple-vars;

html {
    background: #fff;
    scroll-behavior: smooth;
    line-height:1.15;
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: 100%;
    text-shadow: none;
    text-rendering: optimizeLegibility;
    -webkit-font-variant-ligatures: common-ligatures;
    font-variant-ligatures: common-ligatures;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: "kern";
    font-feature-settings: "kern";
    -webkit-font-kerning: normal;
    font-kerning: normal;
    font-size: calc(16px + (40 - 16) *
            (
                (100vw - 320px) / (7680 - 320)
            )
    );
}

html, body {
    font-family: 'Lato', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-weight:700;
    line-height:1.1;
    margin-bottom:1.1rem;
}

h1 {font-size:2.25rem}
h2 {font-size:2rem;}
h3 {font-size:1.75em}
h4 {font-size:1.5rem}
h5 {font-size:1.25rem}
h6 {font-size:1rem;}
p {
    line-height:1.5;
    font-size:1rem;
    margin-bottom:1.1rem;
    font-weight:300;
}

p.--mousePrint {
    font-size:0.8rem;
}

.textCenter {
    text-align:center;
}

.Site {
    width:100%;
    margin-left:0;
}

.SiteNavOpen {
    width:80%;
    margin-left:20%;
}

.menuButton {
    position:absolute;
    top:1vh;
    right:1vw;
    border:none;
    background:none;
    color:#eaeaea;
}

.SiteHeader {
    min-height:100vh;
    background:url('https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') center center;
    background-size:cover;
    background-attachment:fixed;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#eaeaea;
    filter: sepia(40%);
}

.siteBranding {
    display:flex;
    flex-direction:column;
}

.siteBranding a {
    color:#eaeaea;
}

.SiteMain {
    background:#eaeaea;
    color:#353535;
    padding-left:5vw;
    padding-right:5vw;
    padding-top:5vh;
    padding-bottom:5vh;
}

.mainInner {
    @media (min-width:1280px) {
        max-width:66vw;
        margin:0 auto;
    }
}

.articleMain {
    max-width:33em;
    margin:0 auto;
}

.--textCenter {
    text-align:center;
}

.SiteNavigation {
    background:#66023c;
    color:#eaeaea;
    height:100vh;
    width:0;
    position:fixed;
    top:0;
    left:0;
    z-index:1;
    overflow-x:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.13s;
}

.SiteNavigationOpen {
    width:20%;
}

.SiteNavigation a {
    color:#eaeaea;
}

.SiteNavigation li {
    transition: all 0.13s;
}

.SiteNavigation li:hover {
    transform:scale(1.2, 1.2);
}

.Site {
    width:100%;
    margin-left:0%;
    transition: all 0.13s;
}

.SiteColophon {
    background:#66023c;
    color:#eaeaea;
    padding-left:5vw;
    padding-right:5vw;
    padding-top:5vh;
    padding-bottom:5vh;
}

.colophonInner {
    @media (min-width:1280px) {
        max-width:66vw;
        margin:0 auto;
    }
}

.SiteFooter {
    background:#66023c;
    color:#eaeaea;
    padding-left:5vw;
    padding-right:5vw;
    padding-top:5vh;
    padding-bottom:5vh;
}

.footerInner {
    @media (min-width:1280px) {
        max-width:66vw;
        margin:0 auto;
    }
}

.socialMedia {
    text-align:center;
}

.fab:hover {
    transform:scale(1.2, 1.2);
}

.--btnLink {
    background:none;
    color:none;
    border:none;
}

.socialMediaButton {
    transition: all 0.13s;
}

.socialMediaButton:hover {
    transform:scale(1.5, 1.5);
}

javascript（Babel）

let navToggle = document.querySelector('.menuButton');
let nav = document.querySelector('.SiteNavigation');
let site = document.querySelector('.Site');

navToggle.addEventListener('click', (event) => {
    nav.classList.toggle("SiteNavigationOpen");
    site.classList.toggle("SiteNavOpen");
});

答案

我已经检查了您的代码，并且这些类正确适用。如果检查div，则可以看到适用的类。

问题出在.SiteNavOpen CSS中。添加！important标签，因为.Site将覆盖width和margin-left。或者，为避免这样做，请将CSS添加到.Site .SiteNavOpen。像这样：

.SiteNavOpen {
    width: 80% !important;
    margin-left: 20% !important;
}
//OR
.Site .SiteNavOpen {
    width: 80%;
    margin-left: 20%;
}

另外，我建议您开始在浏览器中使用DevTools。如果一个类的CSS被另一个类覆盖并忽略，您可以在那里看到并意识到问题的根源。