请问segmentfault的搜索框foucs时，隐藏了旁边的分类导航条，是怎么实现的？能不能不用js纯css实现？

Question

请问segmentfault的搜索框foucs时，隐藏了旁边的分类导航条，是怎么实现的？能不能不用js的情况下使用纯css实现？纯css请问怎么实现？

搜索框和导航条分别是在两个div中的。两个div是兄弟。

Answer 1

HTML: (伪代码)

htmlform
    i.fa.fa-search
    input type="text"
    ul
        li * 5 > {nav-item-$}

SCSS:

scssinput {
    //未focus时的样式
    &~ul {
        //未focus时的列表样式
    }
    &:focus {
        //input focus时的样式
        &~ul {
            //input focus时的列表样式
        }
    }
}

Answer 2

网站实现源码：

$("#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()})
});

Answer 3

input/Ul 同级
input focus伪类加兄弟选择器 input:focus + ul {display: none}

Answer 4

我也试了试。如果input元素focus，宽度变长时，没有动画效果的话，用纯CSS是可以的。方法就是用兄弟选择器，和伪类focus。但是segmentfault上面好像是有动画效果的。如果有动画效果的话，就会出现blur后，input元素的宽度缩减还没结束，右侧的ul就已经显示出来了这样的结果。纯CSS的办法理论上应该是让 ul 从隐藏到显示也加入一个动画，但好像试不出来。