记天使导航之天气小插件的布局问题

现如今的网络上边有好多优秀的博客系统；

其中最出名的就是word press，也就是我们口头说的WP，因为这套系统算得上是老字号了；

自然而然就有很多模板可以选择，于是吸引了很多小白用户，傻瓜式安装，傻瓜式维护.. zhenxing！

最近发现了一个宝藏主题，这个作者的审美看上去跟我差不多；看了下代码就用到了自己的导航站上边；

蛋是发现了一个小问题，呢就是 天气插件的布局不是很友好，api请求过来生成的DIV是默认在左下角的，但模板定位是以左上角为顶点，所以就成了这个样子：

手机版的也是只露半截出来，最近在复习JS的jquery部分 ；正好就派上用场了；

改完的效果 ：

好了，废话不多说直接祭出代码 ；

<script>
 $('div.weather')[0].addEventListener("click", function() {
  $(document).ready(function() {
   console.log($("div[data-v-db6ccf64]")[0]);
   setTimeout(function() {
    $("div[data-v-db6ccf64]")[0].style.top = "-300px";
   }, 300);
  });
 });
</script>

因为是通过api加载数据，所以监听时间要有一定的延迟，不然可能监听不到；

只修改了点击时间，还可以监听 鼠标划入事件

onmouseenter  ||  $('div[data-v-db6ccf64]')[0]   //逻辑错误

后者一定要等浮窗加载出来之后再执行，不然会因为绑定不到而失效

新版本已经没有这个问题了（我用的是老版本）。。。

有不对的地方翻迎大佬指出，不吝赐教~

将窗口上移封装为函数，通过判断终端类型决定监听方式 ：

			if ($('div.weather')[0]) {
				function weatherUp() {
					$(document).ready(function() {
						setTimeout(function() {
							$("div[data-v-db6ccf64]")[0].style.top = "-300px";
						}, 300);
					});
				}
				if(isPC){
					$('div.weather')[0].addEventListener("mouseover", weatherUp);
				}else{
					$('div.weather')[0].addEventListener("click", weatherUp);
				}
				
				
			}