Question

我使用CSS3复选框来控制侧边栏何时进入移动设备和平板电脑设备的视野。这一切都按预期正常工作。但是，当窗口/浏览器已调整大小时（即使在移动设备上），侧栏也会立即取消选中，从而使导航栏消失。

我试图在JSFiddle中隔离代码，但是那里不会发生错误。我将包含代码段和网站本身。两者都使用相同的类和id名称。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

网站：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', '');
});

将resize的哪个更改复选框属性设置为false，尝试将其更改为true。

在窗口大小调整时，复选框变为未选中状态

1 个答案: