标签和 :checked 选择器在烧瓶中不起作用

Question

我正在 flask 和 css 中使用 html 和 css.

问题：

我希望当我单击标签 (label for="toggle") 时复选框会被选中，但是这不起作用。
我希望当复选框被选中时会触发下面的代码，但是这不起作用。

广告 2)

.toggle:checked + .wrapper > aside {
    margin-left: 0;
}

.toggle:checked + .wrapper > section {
    margin-right: -40%;
}

html 文件:

<!doctype html>    
<html lang="en">    
<head>
    <meta charset="utf-8">
    <title>Application Name</title>
    <meta name="description" content="Application Name">
    <link rel="favorite icon" href="{{ url_for('static', filename='favicon.ico') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/base-theme.css') }}" id="mode_stylesheet">
    <script type="text/javascript" src="{{ url_for('static', filename='js/switch_mode.js') }}"></script>
</head>    
<body>    
    <div class="topnav">
        <table class="topnav_left">
            <tbody>
                <tr>
                    <td>
                        <label for="toggle" class="toggler">
                            <input type="checkbox" id="offcanvas" class="toggle">
                            <span class="navicon"></span>
                        </label>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="topnav_right">
            <tbody>
                <tr>
                    <td>
                        <div class="topnav_mode">
                            <table>
                                <tbody>
                                    <tr>
                                        <td>
                                            <label for="mode_toggle" class="mode_switch">
                                                <input type="checkbox" id="mode_toggle">
                                                <span class="mode_slider"></span>
                                            </label>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>    
    <div class="wrapper">
        <aside>
            <nav>
                <a href="/">HOME</a>
                <a href="/api">API</a>
                <br />
                <p>Versions</p>
                <br />
                <a href="/api/v1/test">Test</a>
            </nav>
        </aside>
    </div>    
    <section>
        <div class="container">
            <div class="row">
                {% block body %}{% endblock %}
            </div>
        </div>
    </section>    
</body>    
</html>

css 文件:

/* Off-canvas sidebar - start */

.wrapper {
    height: 100%;
}

.container {
    margin: 0 15px;
}

.row {
    padding: -15px;
    margin: 15px 0;
}

.row:before,
.row:after {
    content: "";
    display: table;
}

aside {
    width: 40%;
    height: 100%;
    margin-left: -40%;
    float: left;
    position: absolute;
    color: #FFFFFF;
    background-color: #333;
}

section {
    width: 100%;
    height: 100%;
    float: right;
    margin-right: 0;
}

.toggle:checked + .wrapper > aside {
    margin-left: 0;
}

.toggle:checked + .wrapper > section {
    margin-right: -40%;
}

.toggler {
    display: inline-block;
    cursor: pointer;
}

.navicon {
    width: 28px;
    height: 28px;
    background: url("../img/topnav/navicon.png") no-repeat;
    background-size: cover;
    display: block;
}
/* Off-canvas sidebar - end */

Answer 1

正如 MDN docs

中所说

To associate the <label> with an <input> element, you need to give the <input> an id attribute. The <label> then needs a for an attribute whose value is the same as the input's id.

您使用了 class，它应该是例如：

 <label for="offcanvas" class="toggler">
     <input type="checkbox" id="offcanvas" class="toggle">
     <span class="navicon"></span>
 </label>

第二个问题是这个 css 选择器：

.toggle:checked + .wrapper > aside {
    margin-left: 0;
}

.toggle:checked + .wrapper > section {
    margin-right: -40%;
}

+ 选择器是 adjacent sibling combinator，这意味着您的 .wrapper 需要成为 .toggle:checked 元素之后的同级元素。目前，它距离成为相邻的兄弟姐妹还有很长的路要走（并且由于没有 CSS 规则可以到达 'up' DOM 树，所以没有有效的选择器可以与当前 html结构）。

幸运的是，只要您实际上不需要让原始复选框可见，您就可以在此处执行一个巧妙的技巧。您可以将 input 元素移出您的标签（label-for 使它们保持绑定）并将其放在 CSS 规则可以执行您想要的操作的地方。

所以在你的情况下：

 <input type="checkbox" id="offcanvas" class="toggle">
 <div class="wrapper">
        <aside>
            <nav>
                <a href="/">HOME</a>
                <a href="/api">API</a>
                <br />
                <p>Versions</p>
                <br />
                <a href="/api/v1/test">Test</a>
            </nav>
        </aside>
    </div>

标签和 :checked 选择器在烧瓶中不起作用

label and :checked selector not working in flask

css

checkbox

flask