为了账号安全,请及时绑定邮箱和手机立即绑定

请问出了什么问题?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>bing search</title>

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<style type="text/css">

body{background-color:#333;}

.bg-div{position:relative; background-image:url(river.jpg);width:1665px; height:900px; margin:0 auto;}

.logo{margin:-6px 18px 0 0; background-image:url(logo.png);width:107px; height:53px; float:left;}

form{float:left; background-color:#fff; padding:1px; height:30px;}

.search-input-text{border:0; float:left; width:330px; height:29px; line-height:29px; outline:none;}

.search-input-button{border:0;width:29px; height:29px; background-image:url(search-button.png); float:left;}

.search-box{

position: absolute;

top: 401px;

left: 604px;

}

.suggest{width:330px; background-color:#fff; border:1px solid #999;}

.suggest ul{list-style:none; margin:0; padding:0;}

.suggest ul li{padding:3px; font-size:14px; line-height:25px; cursor:pointer;}

.suggest ul li:hover{text-decoration:underline; background-color:#e5e5e5;}

</style>

</head>


<body>

<div class="bg-div">

    <div class="search-box">

    <div class="logo"></div>

        <form class="search-form" action="https://cn.bing.com/search" target="_blank" id="search-form">

        <input type="text" class="search-input-text"  name="q" id="search_input" autocomplete="off"/>

            <input type="submit" class="search-input-button" value=""/>

        </form>

          </div>

    </div>

   <div class="suggest" id="search-suggest" style="display:none">

    <ul id="search-result">

        <li>搜索结果1</li>

            <li>搜索结果2</li>

            <li>搜索结果3</li>

        </ul>

   

   </div>

   

<script>

var getDOM=function(id){

return document.getElementById(id);

}

var addEvent=function(id,event,fn){

var el=getDOM(id)||document;

if(el.addEventListener){

el.addEventListener(event,fn,false);

}

else if(el.attachEvent){

el.attachEvent('on'+event,fn);

}

}

var getElementLeft=function(element){

var actualLeft=element.offsetLeft;//offsetLeft是获得距离父元素左边的距离

var current=element.offsetParent;

while(current!=null){

actualLeft+=current.offsetLeft;

current=current.offsetParent;

}

return actualLeft;

}

var getElementTop=function(element){

var actualTop=element.offsetTop;

var current=element.offsetParent;

while(current!==null){

actualTop+=current.offsetTop;

current=current.offsetParent;

}

return actualTop;

}

addEvent('search_input','keyup',function(){

getDOM('search-suggest').style.top=getElementTop(getDOM('search-form'))+29+'px';

getDOM('search-suggest').style.left=getElementTop(getDOM('search-form'))+'px';

getDOM('search-suggest').style.position='absolute';

getDOM('search-suggest').style.display='block';

})

</script>

</body>

</html>

情况如图:http://img1.sycdn.imooc.com//5843505800019e1a09680389.jpg

提示框怎么变化到那里去了?


正在回答

1 回答

楼主马虎了

getDOM('search-suggest').style.left=getElementTop(getDOM('search-form'))+'px';里应该是Left,不是Top

0 回复 有任何疑惑可以回复我~
#1

慕粉3988711 提问者

非常感谢!这种小错误不该犯的
2016-12-05 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
搜索框制作
  • 参与学习       66042    人
  • 解答问题       431    个

本课程从简入深讲解搜索框的制作,学习JQ与JS实现Ajax技术的不同点

进入课程

请问出了什么问题?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信