javascript选择器的问题与波浪线如何使它成为一个变量

juzqafwq 于 2023-02-28 发布在 Java

关注(0)|答案(2)|浏览(108)

我想知道是否有可能在Javascript中获取此元素：

.side-menu:checked ~ nav

我有一个汉堡菜单使用此选择器打开它的移动版本，我试图关闭该菜单时，它的链接被点击
我的代码：

<header class="header">
    <a href="#" class="logo"><img src="assets/img/brand.png" alt=""></a>
    <input class="side-menu" type="checkbox" id="side-menu" />
    <label class="hamb" for="side-menu"><span class="hamb-line"></span></label>
    <nav class="nav">
        <ul class="menu">
            <li><a href="#">Accueil</a></li>
            <li><a href="#">Agenda</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

和css文件：

.side-menu {
    display: none;
}

/* Toggle menu icon */

.side-menu:checked ~ nav{
    max-height: 100%;
}

有什么想法吗？我试图改变最大值为0检查复选框的值，但我不知道如何做到这一点。也许有一个只使用css的其他解决方案，但作为一个初学者，我还没有找到它
非常感谢

JavaScript

来源：https://stackoverflow.com/questions/75574026/javascript-selector-problem-with-tilde-how-to-make-it-a-vairable

2条答案

按热度按时间

0md85ypi1#

您需要使用querySelector切换DOM元素上的类。
切换时，CSS类将在您的属性上处于活动/非活动状态，并应用/删除CSS效果。

var side-menu = document.querySelector('.side-menu') // Using class
side-menu.classList.toggle('open-menu');

和CSS：

.open-menu{
    display: block;
    max-height: 100%;
    min-width: 20%;
}

你可以检查文件的权利here。

赞(0）回复(0）举报 2023-02-28

qyzbxkaa2#

最后，它的工作与这个简单的函数对我的链接：

function closeM() {
const someCheckbox = document.getElementById('side-menu');
someCheckbox.checked = false;
}

谢谢你让我思考我的问题

赞(0）回复(0）举报 2023-02-28

我来回答

javascript选择器的问题与波浪线如何使它成为一个变量

2条答案

相关问题

热门标签

最新问答