Jquery之搜索项菜单

来源：互联网发布：mac上看电视的软件编辑：程序博客网时间：2024/05/29 13:30

<!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>Jquery之搜索项菜单</title>

<style type="text/css">
   *{padding:0px; margin:0px;}
   div{ border:none;}
   .search{ width: 500px; height:40px; margin:0 auto; position:relative;top:100px; border: 1px solid orange;
   }
   .bar{ width: 500px; height:auto; position: absolute;}
   .left{ width: 80px; height:auto;}
   ul{width: 80px; height:auto; display: none; list-style:none; }
   /*让文本在span标签内垂直和水平方向居中*line-height:40px; display:block; text-align:center; vertical-align: middle;*/
   ul li,span{ width: 80px; line-height:40px; display:block; text-align:center; vertical-align: middle; background-color:#DBEBFA;
   }
   .middle,.middle input{ width:340px; line-height:40px; vertical-align:middle}
   .right,.right input{ width:80px; line-height:40px; border:none;}
   .right input{ background-color:#03C; color:#FFF;}
   .left,.middle,.right{float: left}
   ul li:hover,span:hover{ cursor:pointer; color:orange;}
   .right input{ background-color: orange;}
</style>
<script type="text/javascript" src=".../jquery-3.2.1/jquery-3.2.1.min.js"></script>
<script>
   $(document).ready(function(e) {
       $("span").mouseover(
           function(){
               $(this).parent().children("ul").show();
           }
       );
       //鼠标点击，切换span标签的文字并且隐藏列表
       $("ul li").click(
           function(){
               $("span").text($(this).text())
               $(this).parent().hide();
           }
       );
       //切换列表背景色
       $("ul li").hover(
                   function(){
                       //$(this).css("background-color","orange").css("color","white");
                       $(this).css({"background-color":"orange","color":"white"});
                   },function(){
                       //$(this).css("background-color","#DBEBFA").css("color","black");
                       $(this).css({"background-color":"#DBEBFA","color":"black"});

                   }
               );
       //鼠标点击输入框，信息隐藏
       $("input:text").click(
           function(){
               $(this).parent().siblings().children("ul").hide();
           }
       );

   });
</script>
</head>

<body>

<div id="search" class="search">
    <div id="bar" class="bar">
       <div id="left" class="left">
            <span>微博</span>
            <ul>
                <li>微博</li>
                <li>新闻</li>
                <li>图片</li>
                <li>音乐</li>
                <li>视频</li>
                <li>购物</li>
                <li>地图</li>
                <li>贴吧</li>
                <li>微信</li>
                <li>QQ</li>
                <li>更多>></li>
            </ul>
         </div>
       <div id="middle" class="middle">
              <input type="text" id="text" class="text" placeholder="请输入..."/>
       </div>
       <div id="right" class="right">
              <input type="submit" id="submit" class="submit" value="搜索"/>
       </div>
    </div>
</div>

</body>

</html>

阅读全文

0 0