jquery搜索框制作 http://www.imooc.com/video/263
是真不知道问题到底出在哪里啊QAQ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>bing search</title>
<style type="text/css">
*{font-family: 微软雅黑,serif;
margin: 0;
padding: 0;
font-size: 14px;}
body{background-color: #333}
.bg-div{background-image: url(river.jpg);
margin: 0 auto;
width: 1228px;
height: 690px;}
.logo{background-image: url(logo.png);
float: left;
margin: -4px 18px 0 0;
width: 107px;
height: 53px;
}
.search-form{
float: left;
padding: 5px;
background-color: #FFF;
}
.search-input-text,
.search-input-button{
float: left;
border: 0;
}
.search-input-text{
outline: none;
width: 350px;
height: 25px;
line-height: 25px;
}
.search-input-button{
background-image: url(search-button.png);
width: 29px;
height: 29px;
}
.search-box{
position: absolute;
top: 200px;
left: 300px;
}
.suggest{
width: 388px;
background-color: #FFF;
border: 1px solid #999;
}
.suggest ul{
list-style: none;
}
.suggest li{
padding: 4px;
line-height: 25px;
cursor: pointer;
}
.suggest li:hover{
text-decoration: underline;
background: #F5F5F5;
}
</style>
</head>
<body>
<div>
<div>
<div></div>
<form action="https://cn.bing.com/search" target="_blank" id="search-form">
<input type="text" id="search_input">
<input type="submit" value="">
</form>
</div>
</div>
<div style="display:none;" id="search-suggest">
<ul>
<li>搜索结果1</li>
<li>搜索结果2</li>
</ul>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
$(document).ready(function() {
$('#search_input').on('click',function() {
$('#search-suggest').show().css({
top:$('#search-form').offset().top + $('#search-form').outHeight();
left:$('#search-form').offset().left;
position: "absolute";
});
})
})
</script>
</body>
</html>
qq_Workmachine_01回答
-
ReusKai
css()设置多个 CSS 属性请用“ , ”作分隔符还有jq的取高是 outerHeight
随时随地看视频慕课网APP
相关分类
JavaScript
JQuery