复选框在 window 调整大小时变为未选中状态

Question

我正在使用 CSS3 复选框来控制边栏何时在移动设备和平板电脑设备上出现和消失。这一切都按预期正常工作。但是，当 window/browser 调整大小时（即使在移动设备上），侧边栏会立即取消选中，从而使导航栏消失。

我试图将代码隔离在 JSFiddle 中，但错误并没有发生在那里。我将包括代码片段和网站本身。两者都使用相同的 class 和 id 名称。

ul, li {
  list-style-type:none;
}

.header__actions__menu {
    display: inline-block;
    font-size: .5625rem;
    font-weight: bold;
}

.header__actions__menu span:before {
    content: "X";
    font-family: 'FontAwesome';
    font-weight: normal;
    position: absolute;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    font-style: normal;
    font-size: .875rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.header__actions__menu span {
    background-color: #fff;
    border: 2px solid #000;
    display: block;
    margin: 0 auto 3px;
    position: relative;
    height: 20px;
    width: 22px;
}

.header__actions__close {
    opacity: 0;
    position: absolute;
    transition: opacity .1s linear 1s;
    visibility: hidden;
}

.header__actions__close {
    background-color: #000;
    border-radius: 100%;
    display: inline-block;
    overflow: hidden;
    position: relative;
    height: 22px;
    width: 22px;
    text-indent: -9999px;
}

.header__actions__close:before, .header__actions__close:after {
    opacity: 0;
    transition: opacity .1s linear .2s;
    visibility: hidden;
}

.header__actions__close:before, .header__actions__close:after {
    background-color: #fff;
    content: '';
    left: 50%;
    position: absolute;
    height: 2px;
    width: 14px;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.header__actions__close:after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/*-- Checked CSS --*/
#mobile-nav:checked ~ .header__actions .header__actions__menu, #mobile-nav:checked ~ .header__actions .header__actions__phone {
    display: none;
}

#mobile-nav:checked ~ .header__actions .header__actions__close {
    display: inline-block;
    opacity: 1;
    position: relative;
    visibility: visible;
}

#mobile-nav:checked ~ .header__actions .header__actions__close:before, #mobile-nav:checked ~ .header__actions .header__actions__close:after {
    opacity: 1;
    position: absolute;
    visibility: visible;
}

/*-- Breakpoints --*/
@media only screen and (max-width: 991px) {
.header__actions li:last-child {
    margin-left: auto;
}

<input type="checkbox" style="display: block;" id="mobile-nav">

<div class="header__actions" data-section="header-account-actions">
  <ul>
    <li>
      <label for="mobile-nav" class="header__actions__menu">
        <span></span>
        Menu
      </label>

      <label for="mobile-nav" class="header__actions__close">Close</label>
    </li>
  </ul>
</div>

网站 : https://uatweb.hippowaste.co.uk/ （仅限手机版）

Answer 1

我在 https://uatweb.hippowaste.co.uk/assets/dist/scripts/scripts.js

找到了这段代码

第 154 行

$(window).resize(function () {
    self.$menuIcon.prop('checked', false);
    $('body').css('overflow', '');
});

将调整大小的复选框属性更改为 false，尝试将其更改为 true。

复选框在 window 调整大小时变为未选中状态

Checkbox becomes unchecked on window resize

html

css

jquery

navbar

twitter-bootstrap