Html 按边栏展开/折叠边栏'；边界
我正在使用W3Schools编辑的示例来回答这个问题 在当前的侧栏中，我添加了Html 按边栏展开/折叠边栏'；边界,html,css,Html,Css,我正在使用W3Schools编辑的示例来回答这个问题 在当前的侧栏中，我添加了右边框：10px solid#ddd并且我希望当用户按下边框时侧边栏展开。这可能吗 正文{ 字体系列：“Lato”，无衬线； } .侧导航{ 身高：100%； 宽度：160px； 位置：固定； z指数：1； 排名：0； 左：0； 背景色：#AAAAA； 溢出x：隐藏； 填充顶部：20px； 右边框：10px实心#ddd； } .侧导航a{ 填充：6px 8px 6px 16px； 文字装饰：无； 字体大小：25px；
右边框：10px solid#ddd并且我希望当用户按下边框时侧边栏展开。这可能吗
正文{
字体系列：“Lato”，无衬线；
}
.侧导航{
身高：100%；
宽度：160px；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#AAAAA；
溢出x：隐藏；
填充顶部：20px；
右边框：10px实心#ddd；
}
.侧导航a{
填充：6px 8px 6px 16px；
文字装饰：无；
字体大小：25px；
颜色：#000000；
显示：块；
}
.侧导航a:悬停{
颜色：#f1f1；
}
梅因先生{
左边距：160像素；
/*与侧导航的宽度相同*/
字号：28px；
/*增加文本以启用滚动*/
填充：0px 10px；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.侧导航{
填充顶部：15px；
}
.侧导航a{
字号：18px；
}
}
边栏
此侧边栏为全高（100%），始终显示
向下滚动页面以查看结果
一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。红背飞虱
他的广告上写着“没有胎记”
如果你想用JS解决这个问题，你可以通过切换：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="wind">
<div id="sidenav" onclick="closeNav()">
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#clients">Clients</a>
<a href="#contact">Contact</a>
</div>
<div id="main">
<h2>Sidebar</h2>
<p>This sidebar is of full height (100%) and always shown.</p>
<p>Scroll down the page to see the result.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</div>
</body>
</html>
<style>
.mystyle {
width: 0px !important;
}
body {
font-family: "Lato", sans-serif;
}
#sidenav {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #AAAAAA;
overflow-x: hidden;
padding-top: 20px;
border-right: 10px solid #ddd;
}
#sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #000000;
display: block;
}
#sidenav a:hover {
color: #f1f1f1;
}
#main {
margin-left: 160px; /* Same as the width of the sidenav */
font-size: 28px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
<script>
function closeNav() {
var element = document.getElementById("sidenav");
element.classList.toggle("mystyle");
}
</script>
</body>
</html>
边栏
此侧边栏为全高（100%），始终显示
向下滚动页面以查看结果
一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效
mystyle先生{
宽度：0px！重要；
}
身体{
字体系列：“Lato”，无衬线；
}
#侧导航{
身高：100%；
宽度：160px；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#AAAAA；
溢出x：隐藏；
填充顶部：20px；
右边框：10px实心#ddd；
}
#侧导航a{
填充：6px 8px 6px 16px；
文字装饰：无；
字体大小：25px；
颜色：#000000；
显示：块；
}
#侧导航a：悬停{
颜色：#f1f1；
}
#主要{
左边距：160px；/*与sidenav的宽度相同*/
字体大小：28px；/*增加文本以启用滚动*/
填充：0px 10px；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.sidenav{填充顶部：15px；}
.sidenav a{字体大小：18px；}
}
函数closeNav（）{
var元素=document.getElementById（“sidenav”）；
element.classList.toggle（“mystyle”）；
}
我有一个解决方案：）希望你喜欢。作为一个侧按钮，我声明了一个伪类：after
。我在jQuery
上编写了代码的逻辑
$（'.sidenav'）。在（'click'，函数（e）上{
设height=$（this.height（）；
如果（e.clientX>$（this）.offset（）.left+130&&
e、 clientY<$（此）.offset（）.top+高度）{
$（this.css（'width'，'30px'）；
$（'.main'）.css（'margin-left'，'50px'）；
}否则{
$（this.css（'width'，''）；
$（'.main'）.css（'margin-left'，''）；
}
});
正文{
字体系列：“Lato”，无衬线；
}
.侧导航{
身高：100%；
宽度：160px；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#AAAAA；
溢出x：隐藏；
填充顶部：20px；
/*右边框：10px实心#ddd*/
过渡：.5s；
}
.sidenav:之后{
内容：“；
宽度：30px；
身高：继承；
位置：绝对位置；
右：0；
排名：0；
背景色：#ddd；
光标：指针；
}
.sidenav:悬停：之后{
背景色：#C0；
}
.侧导航a{
填充：6px 8px 6px 16px；
文字装饰：无；
字体大小：25px；
颜色：#000000；
显示：块；
}
.侧导航a:悬停{
颜色：#f1f1；
}
梅因先生{
左边距：160px；/*与sidenav的宽度相同*/
字体大小：28px；/*增加文本以启用滚动*/
填充：0px 10px；
过渡：.5s；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.sidenav{填充顶部：15px；}
.sidenav a{字体大小：18px；}
}
边栏
此侧边栏为全高（100%），始终显示
向下滚动页面以查看结果
一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效
使用普通css还是一些js？@Eric我更喜欢css，但是如果你有js的解决方案，请分享。酷！接下来的问题是：侧边栏上是否可能有悬停效果？所以当用户将鼠标悬停在上方时，将其颜色调暗一点（看起来像一个按钮）？谢谢：）是的，现在我将调整悬停效果。请检查答案！你很好。最后一个问题，如果我想将span包含在显示文本中，是否可以使用此选项？我这里有我的项目：所以当侧边栏展开时，文本会显示，当它折叠时，只显示表情。你能做到这一点，还是很难做到？当面板展开时，显示文本，当面板折叠时，只显示图标（表情符号），而不显示文本。对吗？