首页 新闻 搜索 专区 学院

关于豆瓣电影网页的一个“小问题”

0
悬赏园豆:50 [已解决问题] 解决于 2016-11-22 22:51

在浏览豆瓣电影的时候(https://movie.douban.com)看见了这样一个效果,没有想到实现的方法;

如下图:



右边搜索影院那里,我先点击广州,点出了那个div块,然后只要点击不是这个div的其他区域,这个div就会又自动隐藏,我想了很久没有想出好的解决方案,不知道是不是给body绑定一个click事件,然后判断点击的节点是不是包含在这个div里面,最后触发这个div的隐藏?我看了下好像并没有遮罩层....

求各位大神能给个解决方案,js/jquery/react/vue/backbone....都行,知道方法就行,不用写具体代码。

脑残宝的主页 脑残宝 | 初学一级 | 园豆:165
提问于:2016-11-21 23:02
< >
分享
最佳答案
0

基本上实现方式就和你说的一样,这是它网页上的代码:

t("body").click(function(e) {
    t.contains(f.$results[0], e.target) || t(e.target).is("#cinemas-suggestion-input input") || f.hide()
}))

代码经过了压缩所以看不出这些方法是做什么用的,但从几个关键字contains和hide可以看出它通过判断点击的元素是否包含目标元素来实现隐藏,f.$results[0]是div#cinemas-suggestion-list,#cinemas-suggestion-input input是输入框,也就是说如果点击的不是这两个元素,就隐藏它。

收获园豆:50
逐影 | 小虾三级 |园豆:998 | 2016-11-21 23:44
其他回答(1)
0

你可以在CSS中这只隐藏属性,当鼠标的焦点在输入的文本框的时候就会显示,当失去焦点是这个div又会隐藏。很简单的你搜索一下hidden这个隐藏的函数,很简单的!主要就是考虑鼠标的焦点,就想单击出现某种效果是一样的!你找一下CSS和HTML的API在Jquery中也可以实现,你可以去这网站w3school或者菜鸟教程!这两个网站中都有资料,你看看吧,记得给我最佳答案啊

静静流 | 园豆:11 (初学一级) | 2016-11-22 15:52
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册