请问的搜索框foucs时,隐藏了旁边的分类导航条,是怎么实现的?能不能不用js的情况下使用纯css实现?纯css请问怎么实现?
搜索框和导航条分别是在两个div中的。两个div是兄弟。
HTML: (伪代码)
html
form i.fa.fa-search input type="text" ul li * 5 > {nav-item-$}
SCSS:
scss
input { //未focus时的样式 &~ul { //未focus时的列表样式 } &:focus { //input focus时的样式 &~ul { //input focus时的列表样式 } } }
input/Ul 同级
input focus伪类加兄弟选择器 input:focus + ul {display: none}
网站实现源码:
$("#searchBox").focus(function(){
var e=$(".nav .menu").width()+180+"px";
$(".nav .menu").hide();
$(this).animate({width:e},200)
});
$("#searchBox").blur(function(){
$(this).animate({width:"180px"},200,"swing",function(){$(".nav .menu").show()})
});
我也试了试。如果input元素focus,宽度变长时,没有动画效果的话,用纯CSS是可以的。方法就是用兄弟选择器,和伪类focus。但是上面好像是有动画效果的。如果有动画效果的话,就会出现blur后,input元素的宽度缩减还没结束,右侧的ul就已经显示出来了这样的结果。纯CSS的办法理论上应该是让 ul 从隐藏到显示也加入一个动画,但好像试不出来。