Jquery 显示从悬停到单击按钮的侧边栏

所以，我有一个隐藏的边栏，当鼠标悬停在它上面时会显示出来

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

---

我的问题是，如何将悬停更改为单击按钮以显示侧边栏。它将用于移动版本，因此当在小型设备中打开web时，它将自动将边栏宽度更改为零，并显示一个“菜单按钮”。示例如下：但我的是先使用hover，我没有使用jquery。有可能吗？谢谢

使用CSS，您只需使用

：target

而不是

：hover

即可实现这一点

.sidenav:target {
    width: 250px;
}

现在，您只需要一个锚定链接就可以在目标元素上设置焦点

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

缺点是，由于您的链接也包含空的锚链接（即

#

），侧边栏在单击时会失去焦点，并且会缩小到原来的宽度

下面是一个基于您的代码的示例。
添加此css：

.sidenav a{ float:left; width:100%;}
.mobiletoggle img{ width:25px; height:25px; float:right;}
.mobiletoggle{ float:right; width:50px;  cursor:pointer;}
@media screen and (min-width:768px){.mobiletoggle{ display:none;}}
@media screen and (max-width:767px){.sidenav{ width:0px; }.sidenav.open{ width:100px; }}

添加以下内容：

$(document).ready(function() {


$('.mobiletoggle').on("click", function(e) {
$('.sidenav').toggleClass( "open" );

}))

用你的代码添加这个html

<div class="mobiletoggle"><img src="../favicon.ico"></div>

---

它的运行方式与您提供的参考相同。只需操作它，让我知道评论。

是的，当我在移动设备中打开时，图像会显示出来，但当我单击它时，它不会显示侧边栏。为什么呢？谢谢，我们也可以用CSS吗？这是可能的？对于哪个悬停，我们必须显示切换img或我的意思是，当我从桌面打开它时，它将显示悬停使用的侧栏，如果我从移动设备打开它，悬停将关闭，并用按钮更改，侧栏没有宽度。或者你可以从打开桌面和手机版本中看到这个例子，你会明白我的意思。感谢您在此之前根据以下情况使用不同的款式：悬停表示大视口，目标表示小视口。

});

<div class="mobiletoggle"><img src="../favicon.ico"></div>