html - 当我将复选框位置移动到导航栏时，隐藏和显示边栏不起作用

Question

在此演示中，我使用 checkbox 分别隐藏和显示侧边栏以将内容移动到左侧，但我的问题是当我将 checkbox 从当前位置更改为导航栏时它不起作用。请帮我。 jsfiddle

index.html

<div id="wrapper">
    <div id="header">
        <h2>My Header</h2>
    </div>

    <div id="navbar">
        <h2>My Navbar</h2>
    </div>

    <div class="content-wrapper">
        <input id="slide-sidebar" type="checkbox" role="button" />
        <label for="slide-sidebar"><span>close</span></label>

        <div class="sidebar-left">
            <h2>Lecture Dates</h2>
            <p>11/07 - Lecture on Caesar</p>
            <p>11/08 - Lecture on Caesar</p>
            <p>11/09 - Lecture on Caesar</p>
            <p>11/10 - Lecture on Caesar</p>
            <p>11/11 - Lecture on Caesar</p>
            <p>11/07 - Lecture on Caesar</p>
            <p>11/08 - Lecture on Caesar</p>
            <p>11/09 - Lecture on Caesar</p>
            <p>11/10 - Lecture on Caesar</p>
            <p>11/11 - Lecture on Caesar</p>
            <p>11/07 - Lecture on Caesar</p>
        </div>


        <div class="portfolio">

            <h1>Hello World</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra mauris nec sem condimentum pellentesque. Praesent tincidunt non nulla in ullamcorper. Nulla lacinia, magna ac iaculis sodales, elit odio sagittis nisl, vel egestas sem quam sit amet leo. Maecenas pellentesque porta cursus. In ornare, diam eget maximus fermentum, felis lacus bibendum nunc, aliquam egestas dui ligula ut ante.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra mauris nec sem condimentum pellentesque. Praesent tincidunt non nulla in ullamcorper. Nulla lacinia, magna ac iaculis sodales, elit odio sagittis nisl, vel egestas sem quam sit amet leo. Maecenas pellentesque porta cursus. In ornare, diam eget maximus fermentum, felis lacus bibendum nunc, aliquam egestas dui ligula ut ante.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra mauris nec sem condimentum pellentesque. Praesent tincidunt non nulla in ullamcorper. Nulla lacinia, magna ac iaculis sodales, elit odio sagittis nisl, vel egestas sem quam sit amet leo. Maecenas pellentesque porta cursus. In ornare, diam eget maximus fermentum, felis lacus bibendum nunc, aliquam egestas dui ligula ut ante.</p>
            <h2>Hello World</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra mauris nec sem condimentum pellentesque. Praesent tincidunt non nulla in ullamcorper. Nulla lacinia, magna ac iaculis sodales, elit odio sagittis nisl, vel egestas sem quam sit amet leo. Maecenas pellentesque porta cursus. In ornare, diam eget maximus fermentum, felis lacus bibendum nunc, aliquam egestas dui ligula ut ante.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra mauris nec sem condimentum pellentesque. Praesent tincidunt non nulla in ullamcorper. Nulla lacinia, magna ac iaculis sodales, elit odio sagittis nisl, vel egestas sem quam sit amet leo. Maecenas pellentesque porta cursus. In ornare, diam eget maximus fermentum, felis lacus bibendum nunc, aliquam egestas dui ligula ut ante.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra mauris nec sem condimentum pellentesque. Praesent tincidunt non nulla in ullamcorper. Nulla lacinia, magna ac iaculis sodales, elit odio sagittis nisl, vel egestas sem quam sit amet leo. Maecenas pellentesque porta cursus. In ornare, diam eget maximus fermentum, felis lacus bibendum nunc, aliquam egestas dui ligula ut ante.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra mauris nec sem condimentum pellentesque. Praesent tincidunt non nulla in ullamcorper. Nulla lacinia, magna ac iaculis sodales, elit odio sagittis nisl, vel egestas sem quam sit amet leo. Maecenas pellentesque porta cursus. In ornare, diam eget maximus fermentum, felis lacus bibendum nunc, aliquam egestas dui ligula ut ante.</p>
        </div>
    </div>
    <div id="footer">
        <h3>My Footer</h3>
    </div>
</div>

样式.css

[body {
    background-color: #9c9f84;
    margin: 0px;
    font-family: Georgia;
    font-size: 14px;
}
#header {
    background-color: #5c755e;
    left: 0px;
    right: 0px;
    top: 0px;
    position: fixed;
    z-index: 100;
}
#header h2 {
    text-align: center;
    padding: 10px;
}
#footer {
    background-color: #5c755e;
    margin: 10px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    font-size: 110%;
    border-radius: 5px;
    position: relative;
}
#footer h3 {
    text-align: center;
    padding: 10px;
}
#navbar {
    background-color: #5c755e;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    margin-top: 90px;
}
#navbar h2 {
    text-align: center;
    padding: 10px;
}
#slide-sidebar + label:after {
    content: '';
    clear: both;
    display: block;
}
#wrapper {
    height: 100%;
    width: 100%;
    position: absolute;
}
.portfolio {
    background-color: #e5e4d7;
    margin-left: 0px;
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 20px;
    font-size: 110%;
    border-radius: 5px;
    -moz-transition: left 1s ease;
    transition: left 1s ease;
    position: relative;
    overflow: hidden;
    width: auto;
}
.sidebar-left {
    display: block;
    box-sizing: border-box;
    background-color: #e5e4d7;
    margin-top: 0px;
    margin-left: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    border-radius: 5px;
    padding: 20px;
    font-size: 105%;
    width: 260px;
    clear: both;
    position: relative;
    -moz-transition: margin-left 1s ease;
    transition: margin-left 1s ease;
    float: left;
    overflow: hidden;
    white-space: nowrap;
    -moz-transition: width 0.5s ease, padding 0.5s ease;
    transition: width 0.5s ease, padding 0.5s ease;
}
input:checked ~ .sidebar-left {
    padding-left: 0px;
    padding-right: 0px;
    margin-right: 0px;
    width: 0px;
    -moz-transition: width 0.5s ease, padding 0.5s ease;
    transition: width 0.5s ease, padding 0.5s ease;
}][1]

Answer 1

正如@Sumit 所写:

It isn't working because you have written input:checked ~ .portfolio. CSS can not select in upward direction, you will need jQuery or JS to do this.

您可以使用以下 jQuery 代码:

$("#slide-sidebar").change(function() {
  $(".sidebar-left").toggleClass("show");
});

还有这段 CSS 代码:

.sidebar-left.show {
  padding-left: 0px;
  padding-right: 0px;
  margin-right: 0px;
  width: 0px;
  -moz-transition: width 0.5s ease, padding 0.5s ease;
  transition: width 0.5s ease, padding 0.5s ease;
}

Updated JSFiddle .