jquery - 当我不在 css active 类中保存时弹出菜单关闭

Question

我做了一个可折叠的菜单，我用 jQuery 调用我的事件代码。但是，它只在我按住鼠标时出现，在我不按住时消失。

CSS

#menu{position: fixed;
    width: 400px;
    height: 100%;
    top: 0;
    left:-400px;
    background: linear-gradient(#1a0000, #800000);
}
#menu:active{
    left:0;
}

jQuery:

$(document).ready(function(){
        $('.icon').click(function(){
            $('.icon').toggleClass('active');
            $('.menu').toggleClass('active');
        })
    })

Answer 1

为此你不需要 jquery。

只需使用复选框 hack。

HTML

<div class="button">
  <input type="checkbox" id="open">
  <label for="open">click to open me
    <div class="menu">
      This is your menu that appears
    </div>
  </label>
</div>

<div class="menu">
  This is your menu that appears
</div>

CSS

.button input {
  display: none;
}

.menu {
  display: none;
}

#open:checked+label>.menu {
  display: block !important;
}

Demo