Question

我正在尝试使用jQuery并使用classList.toggle更改颜色在我的网站上编码Darkmode。大部分情况下一切正常，但导航仅适用于前li和a。这是我的代码：

HTML

<div class="fixed-darkmode">
    <div class="darkmode-definition">
        <button class="nightModeButton">darkmode</button>
    </div>


    <nav style="padding-left: 100px;">
        <ul>
            <li><a href="#">Bio</a></li>
            <li><a href="#">Galéria</a></li>
        </ul>
    </nav>

CSS

li a {
    display: inline-block;
    font-family: 'Merriweather', serif;
    font-weight: 500;
    font-size: 22px;
    text-decoration: none;
    color: #171717;
    padding: 0 30px;
}

li a:hover {
    color: #171717;
    text-decoration: none;
}

body.night-mode {
    background: #181b23;
}

li a.night-mode {
    color: #fff !important;
}

JavaScript（jQuery）

var nightModeToggleButton = document.querySelector(".nightModeButton");
var body = document.querySelector("body");
var navigacka = document.querySelector("a");

nightModeToggleButton.onclick = function() {
    nightModeToggleButton.classList.toggle("night-mode");
    body.classList.toggle("night-mode");
    navigacka.classList.toggle("night-mode");
};

Answer 1

更改

li a.night-mode {
    color: #fff !important;
}

到

.night-mode li a {
  color: #fff !important;
}

给出您期望的结果。

只是一个想法：与其直接在li或ul或a上不应用颜色修改，不如使用一个名为light-mode的类，并将与光模式相关的样式嵌套在内部。 / p>

var nightModeToggleButton = document.querySelector(".nightModeButton");
        var body = document.querySelector("body");
        var navigacka = document.querySelector("a");


        nightModeToggleButton.onclick = function() {
            nightModeToggleButton.classList.toggle("night-mode");
            body.classList.toggle("night-mode");
            navigacka.classList.toggle("night-mode");
        };

li a {
    display: inline-block;
    font-family: 'Merriweather', serif;
    font-weight: 500;
    font-size: 22px;
    text-decoration: none;
    color: #171717;
    padding: 0 30px;
}

li a:hover {
    color: #171717;
    text-decoration: none;
}

body.night-mode {
    background: #181b23;
}

.night-mode li a {
    color: #fff !important;
}

<div class="fixed-darkmode">
            <div class="darkmode-definition">
                        <button class="nightModeButton">darkmode</button>
            </div>

 
 <nav style="padding-left: 100px;">
                        <ul>
                            <li><a href="#">Bio</a></li>
                            <li><a href="#">Galéria</a></li>
                        </ul>
                    </nav>

用jQuery添加类仅适用于第一个元素

1 个答案: