javascript - 请问的搜索框foucs时，隐藏了旁边的分类导航条，是怎么实现的？能不能不用js纯css实现？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

巴扎黑 2017-04-10 15:03:46

[JavaScript讨论组]

821

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

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

巴扎黑

全部回复(4)

大家讲道理2017-04-10 15:05:46 4楼

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时的列表样式
        }
    }
}

赞 +0

添加回复

迷茫2017-04-10 15:05:46 3楼

网站实现源码：

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

赞 +0

添加回复

高洛峰2017-04-10 15:05:46 2楼

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

赞 +0

添加回复

黄舟2017-04-10 15:05:46 1楼

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

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>