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

当我不在CSS活动班级中关闭弹出菜单时关闭

1 个答案: