关于豆瓣电影网页的一个“小问题”
0
悬赏园豆：50
[已解决问题]
解决于 2016-11-22 22:51
在浏览豆瓣电影的时候（https://movie.douban.com）看见了这样一个效果，没有想到实现的方法；
如下图：
右边搜索影院那里，我先点击广州，点出了那个div块，然后只要点击不是这个div的其他区域，这个div就会又自动隐藏，我想了很久没有想出好的解决方案，不知道是不是给body绑定一个click事件，然后判断点击的节点是不是包含在这个div里面，最后触发这个div的隐藏？我看了下好像并没有遮罩层....
求各位大神能给个解决方案，js/jquery/react/vue/backbone....都行，知道方法就行，不用写具体代码。
最佳答案
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
其他回答(1)
0
你可以在CSS中这只隐藏属性，当鼠标的焦点在输入的文本框的时候就会显示，当失去焦点是这个div又会隐藏。很简单的你搜索一下hidden这个隐藏的函数，很简单的！主要就是考虑鼠标的焦点，就想单击出现某种效果是一样的！你找一下CSS和HTML的API在Jquery中也可以实现，你可以去这网站w3school或者菜鸟教程！这两个网站中都有资料，你看看吧，记得给我最佳答案啊