Javascript 如何在单击时平滑地展开边框底部_Javascript_Css

Javascript 如何在单击时平滑地展开边框底部

javascript css

Javascript 如何在单击时平滑地展开边框底部,javascript,css,Javascript,Css,我有一个手风琴。在悬停中出现一个边框底部，宽度很小如何在单击时平滑地展开此边框底部 var acc=document.getElementsByClassName（“accordion”）； var i；让li=document.getElementsByTagName（“li”）；对于（i=0；i border: none; transition: 0.4s; 对此-> border-bottom:1px solid #ffffffff; transition: border 0.

我有一个手风琴。在

悬停

中出现一个边框底部，宽度很小

如何在

单击时平滑地展开此边框底部

var acc=document.getElementsByClassName（“accordion”）；
var i；
让li=document.getElementsByTagName（“li”）；
对于（i=0；i

手风琴{
字体大小：27px；
背景色：$默认为白色；
颜色：#444；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：居中；
大纲：无；
过渡：0.4s；
}
.主动{
边框底部：1px实心$默认黑色；
} 
.小组{
填充：0 18px；//背景色：白色；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
}
a{
文字装饰：无；
颜色：$默认为黑色；
文本对齐：居中；
字号：18px；
字体系列：“fira_sansregular”；
颜色：灰色；
}
李：悬停：之前{
内容：“；
位置：绝对位置；
左：40%；
高度：1px；
边缘顶部：75px；
文本对齐：居中；
宽度：20%；
边框底部：1px实心#000；
}
保险商实验室{
列表样式类型：无；
}




布拉布拉斯


BLA丝状体术


布拉布拉


一些废话


布拉布拉

这就是你要找的吗

var acc=document.getElementsByClassName（“accordion”）；
var i；
让li=document.getElementsByTagName（“li”）；
对于（i=0；i

手风琴{
字体大小：27px；
背景色：$默认为白色；
颜色：#444；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：居中；
大纲：无；
过渡：0.4s；
}
.小组{
填充：0 18px；//背景色：白色；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
}
a{
文字装饰：无；
颜色：$默认为黑色；
文本对齐：居中；
字号：18px；
字体系列：“fira_sansregular”；
颜色：灰色；
}
李国荣先生{
位置：相对位置；
}
.nav li:悬停：在{
左：40%；
宽度：20%；
边框底部：1px实心#000；
过渡：均为0.5s；
}
.nav li.主动：在，
.nav li:悬停：在{
内容：“；
位置：绝对位置；
高度：1px；
底部：0；
边框底部：1px实心#000；
}
.nav li.激活：之前{
宽度：100%；
左：0；
}
保险商实验室{
列表样式类型：无；
}


布拉布拉斯


BLA丝状体术


布拉布拉


一些废话


布拉布拉

在此块代码中->
.accordion {
 font-size: 27px;
 background-color: $default-white;
 color: #444;
 cursor: pointer;
 padding: 18px;
 width: 100%;
 border: none;
 text-align: center;
 outline: none;
 transition: 0.4s;

}
更改两行代码->
border: none;
transition: 0.4s; 

对此->
border-bottom:1px solid #ffffffff;
transition: border 0.4s;

并添加代码悬停；例如：
 .accordion {
    border-bottom: 1px solid black;
 }

我希望能帮助你
 @TakitIsy这里有什么很难理解的JU平滑地扩展边框宽度。这里是这个问题的一个例子，看看这个从中心边框底部扩展的效果