jquery - 从悬停到按钮单击显示侧边栏

Question

所以，我隐藏了侧边栏，当鼠标悬停在它上面时会显示。

这是html代码:

<div id="mySidenav" class="sidenav">
  <img class="logo1" src="../img/logo1.png"><br><br>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</div>

和 CSS 代码:

.sidenav {
    height: 100%;
    width: 100px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    padding-top: 60px;
    transition: 0.8s;
}

.sidenav:hover{
   width: 250px;
}

我的问题是，如何将悬停更改为单击按钮以显示侧边栏。它将用于移动版本，因此当网页在小型设备中打开时，它会自动将侧边栏宽度更改为零并出现一个“菜单按钮”。这个例子就像这个链接:http://bootsnipp.com/snippets/featured/sidebar-responsive但我的是先使用悬停，我没有使用 jquery。有可能的？谢谢

Answer 1

您只能通过使用 :target 而不是 :hover 来使用 CSS 实现此目的。

.sidenav:target {
    width: 250px;
}

现在您只需要一个 anchor 链接即可将焦点设置在目标元素上。

<a href="#mySidenav">Click</a>

缺点是，因为您的链接还包含空 anchor 链接(#)，所以边栏在单击它们时会失去焦点，并且会缩小到原始宽度。

这是一个基于您的代码的示例。
https://jsfiddle.net/PaulvdDool/rkxeyf1g/