輸入后顯示的列表無法定位到搜索寬下面怎么回事？
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge; charset=UTF-8""/>
<title>bing search</title>
<script type="text/javascript" src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background:#ccc;
}
.bg-img{
width:1366px;
height:768;
background-image:url(river.jpg);
margin:0 auto;?
position:relative;
}
.logo{
width:107px;
height:53px;
background-image:url(logo.png);
float:left;
margin:-5px 10px 0 0;
}
.search_form{
float:left;
background-color:#fff;
padding:5px;
}
.txt{
width:350px;
height:29px;
line-height:29px;?
border:0;
float:left;
outline:none;
}
.sub{
border:0;
width:29px;
height:29px;
background-image:url(search-button.png);
}
.search_box{
position:absolute;
top:20%;
left:25%;
}
.suggest{
width:388px;
background-color:#fff;
border:1px solid #999;
display: none;
}
.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-img'>
<div class='search_box'>
<div class='logo'></div>
<form id='searchForm' class='search_form' action='https://cn.bing.com/search' target="_blank">
<input type="text" class="txt" id='search_input'>
<input type="submit" class="sub" value=''>
</form>
</div>
?</div>
?<div class='suggest' id='search_suggest'>
<ul>
<li>搜索內容1</li>
<li>搜索內容2</li>
<li>搜索內容3</li>
<li>搜索內容4</li>
</ul>
?</div>
?
?<script>
?$("#search_input").bind('keyup',function(){
? $("#search_suggest").show().css({
? position:'absolute',
? top:$("#search_form").offset().top+39,
? left:$("#search_form").offset().left,
? });
?})
?</script>
</body>
</html>
2016-11-24
錯的地方有點多哦，我?guī)湍愀暮昧耍?/p>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge; charset=UTF-8""/>
<title>bing search</title>
<script type="text/javascript" src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background:#ccc;
}
.bg-img{
width:1366px;
height:768;
background-image:url(river.jpg);
margin:0 auto;?
position:relative;
}
.logo{
width:107px;
height:53px;
background-image:url(logo.png);
float:left;
margin:-5px 10px 0 0;
}
form{
float:left;
background-color:#fff;
padding:5px;
}
.txt{
width:350px;
height:29px;
line-height:29px;?
border:0;
float:left;
outline:none;
}
.sub{
border:0;
width:29px;
height:29px;
background-image:url(search-button.png);
float: left;
}
.search_box{
position:absolute;
top:200px;
left:300px;
}
.suggest{
width:388px;
background-color:#fff;
border:1px solid #999;
display: none;
}
.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-img'>
<div class='search_box'>
<div class='logo'></div>
<form id='searchForm' class='search_form' action='https://cn.bing.com/search' target="_blank">
<input type="text" class="txt" id='search_input'>
<input type="submit" class="sub" value=''>
</form>
</div>
?</div>
?<div class='suggest' id='search_suggest'>
<ul>
<li>搜索內容1</li>
<li>搜索內容2</li>
<li>搜索內容3</li>
<li>搜索內容4</li>
</ul>
?</div>
?<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
?<script>
?$("#search_input").bind('keyup',function(){
? $("#search_suggest").show().css({
? position:'absolute',
? top:$("#searchForm").offset().top+39,
? left:$("#searchForm").offset().left,
? });
?})
?</script>
</body>
</html>
我簡單說一下一下幾點咯：1.你有一個.sub沒有設置left，2.你.search_box的top,left的參數(shù)不對哦~3.主要實現(xiàn)不出你想的效果上面那兩點不算是主要原因，主要可能是你給form表單設置的id是searchForm這個名字，可是你在下面的JQ代碼中調用時，寫的卻不是這個哦，還有調用JQ要先插入引用的庫才行哦。這個習慣一定要有