JQuery 模拟下拉列表

wxbwyx821 , 2009/12/23 18:56 , Jquery , 评论(1) , 阅读(1326) , Via 本站原创

收藏到 [天天] [和讯] [我摘] [新浪] [Google] [bolaa] [POCO] [百度] [Yahoo] [QQ书签] [twitter]

最近在做一项目时，设计师改变了下拉框的默认样式。无奈，只能通过模拟实现。
以下是结构：

以下是JQ代码：

样式就不贴出来了，我会给出实例，上面的JQ代码，我一开始就不知道鼠标离开下拉时，点击页面其他地方时，下拉隐藏，怎么模拟了，后来，参考了网上的。
以下是实例(IE下运行后请再次刷新页面，原因请见本站首页公告)：

<!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" />
<script type="text/javascript" src="http://www.wugong.net.ru/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function() {
  $(".dropBtn").click(function() {
    $(".dropList").toggle();
  });
  $(".dropList li").click(function() {
    var listText = $(this).html(); 
    $(".putIn").val(listText); //将所点击下拉列表的内容复制到input中
    $(".dropList").hide(); //然后将下拉列表隐藏
  }); //以下是给文档绑定点击事件，当所点的祖级元素们中没有dropDown样式，则下拉列表隐藏
  $(document).bind('click',
  function(e) {
    var clickme = $(e.target);
    if (!clickme.parents().hasClass("dropDown")) $(".dropList").hide();
  });
})
</script>
<style type="text/css">
* { margin:0; padding:0; }
ul,li{ list-style:none;}
.dropDown{width:170px;}
.dropDown input{ float:left; height:16px; padding:2px 0 0 0; border:1px solid #000;}
.dropBtn{ float:left; height:19px; width:19px; cursor:pointer; background:red; }
.dropList{ clear:both; width:168px; border:1px solid red; display:none; border-top:none;}
.dropList li{ height:20px; border-top:1px solid red;}
</style>
<title>wgJq</title>
</head>
<body      >
<div class="dropDown">
    <input class="putIn" name="" type="text" readonly="readonly" />
    <span class="dropBtn"></span>
    <ul class="dropList">
        <li>下拉一</li>
        <li>下拉二</li>
        <li>下拉三</li>
        <li>下拉四</li>
        <li>下拉五</li>
    </ul>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

之前没有考虑input可以输入，而select是不允许用户输入的，所以又给input只读属性，readonly="readonly"。

作者：wxbwyx821 @ 蜈蚣's Blog
地址：http://www.wugong.net.ru/blog/read.php?63
版权所有。转载时请以链接形式注明作者和原始出处.

最新日志		随机日志		综合排行
	FF3.6.8和op... 图片滚动插件jcar... 一道实验小学入学考试... jQuery tab... 焦点图推荐认识lastInde... 第七期WEB标准交流... 哀悼玉树大地震死难者 html5test 阿拉伯语鸟语的那些事...		ico图标 FF O... 一道实验小学入学考试... jquery效果在I... overflow：h... 测试运行代码插件刚刚试用了迅雷统计，... 第七期WEB标准交流... 关于z-index 哀悼玉树大地震死难者 Jquery 中的防...		select下拉列表... 返回顶部代码 jquery效果在I... FF下输入框中光标居... ico图标 FF O... 关于舞女顺时针转或逆... JQuery 模拟下... 很久就有的一个的fl... 有利于SEO的di... 一道实验小学入学考试...