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

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

Answer 1

只有使用:target代替:hover，才能通过CSS实现此目的。

.sidenav:target {
    width: 250px;
}

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

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

缺点是因为您的链接还包含空的锚链接（#），侧边栏在点击时会失去焦点，并会缩小到原始宽度。

以下是基于您的代码的示例 https://jsfiddle.net/PaulvdDool/rkxeyf1g/

Answer 2

添加此css：

^\d{2}([ .-]?)\d{2}(?:\1\d{2}){3}$

添加此js：

<TextView
    android:id="@+id/distance"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:drawableLeft="@drawable/distance"
    android:drawablePadding="10dp"
    android:padding="10dp"
    android:textAlignment="center"
    android:textColor="#ffffff"
    android:textSize="20sp" />

}）;

.$http({
    url: "/api/data",
    method: "GET",
    cache: true
})

使用您的代码添加此HTML

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

它正如你给出的那样运行。只是努力让我知道评论。

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

2 个答案: