<!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>无标题文档</title>

<script src="../jquery-1.11.2.min.js"></script>

<style type="text/css">

*{ margin:0px auto; padding:0px}

#xiala{ width:150px}

#sel{ width:150px; height:25px; border:1px solid #666}

#sel:hover{ cursor:pointer}

#list{ width:150px; display:none}

.node{ width:150px; height:25px; background-color:#F6F; font-weight:bold; color:white; font-family:微软雅黑; text-align:center; line-height:25px; vertical-align:middle; border:1px solid #666; border-top:0px;}

.node:hover{ background-color:#69C; cursor:pointer}

</style>

</head>

<body>

<div id="xiala">

    <div id="sel">所有</div>

    <div id="list">

        <div class="node">所有</div>

        <div class="node">潘庄</div>

        <div class="node">中关村</div>

        <div class="node">火炬公园</div>

        <div class="node">人民公园</div>

    </div>

</div>

</body>

<script type="text/javascript">

$(document).ready(function(e) {

    //下拉列表

    $("#sel").click(function(){

        if($("#list").css("display")=="none")

        {

            $("#list").css("display","block");

        }

        else

        {

            $("#list").css("display","none");

        }

        })

    $(".node").click(function(){

        var zhi = $(this).text();

        $("#sel").text(zhi);

        $("#list").css("display","none");

        })

});

</script>

</html>

JQ 特效下拉列表 写出与css一样的效果的更多相关文章

  1. 用最简单的代码写出banner图轮播效果

    以下视频是由[赵一鸣随笔]博客提供的“用最简单的代码写出banner图轮播效果”. 查看全屏高清视频,请点击链接:http://www.zymseo.com/58.html

  2. 用jquery写出图片自动轮播效果

    相关代码如下,只要把代码粘贴进编辑器,修改图片路径,即可看到效果. 1.html部分 <body>   <ul class="banner">   < ...

  3. 用js写出一个漂亮的单选框选中效果

    一般的input框比较简单,我们可以用JavaScript配合css背景图片定位让我们模拟写出一个点击选中效果 首先需要有个图片素材,当页面加载的时候是背景图片定位到左图,当我们点击图片的时候,背景图 ...

  4. vue写出放大镜的效果

    用vue写出放大镜查看图片的效果. 安装 npm install vue2.0-zoom 引入 import imgZoom from 'vue2.0-zoom' 组件 components: { i ...

  5. css写出0.5px边框（一）

    在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...

  6. 如何写出优雅的CSS代码 ？(转)

    对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混 ...

  7. 如何写出优雅的css代码 ？

    如何写出优雅的css代码 ? 对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于 ...

  8. 【技能】使用纯CSS+html写出方向箭头，简单慷慨，好看

    使用纯CSS+html写出方向箭头,贴出来就能够用,100%原创 <html> <head> <title></title> <meta http ...

  9. CSS代码写出的各种形状图形

    做网页设计时经常要用到各种形状的图形,对于规则的图形很简单,但是对于不规则的图形,一般我们都是用图片,今天就在这里教大家怎样用css代码写出各种规则不同的图形 1.正方形 #square {width ...

随机推荐

  1. iOS开发——网络篇——数据安全（MD5）,HTTPS，检测网络状态

    一.数据安全 1.提交用户的隐私数据一定要使用POST请求提交用户的隐私数据GET请求的所有参数都直接暴露在URL中请求的URL一般会记录在服务器的访问日志中服务器的访问日志是黑客攻击的重点对象之一 ...

  2. word20161201

    http://baike.baidu.com/link?url=ZTTkA-suMlJNGb2AeNBE2E6MZQZwjkvWXKgmUpeLBIrCfC-k32cGJOJLrtDlLXjsTfkD ...

  3. Hello，World

    引用自http://www.cnblogs.com/jbelial/archive/2013/05/08/3067471.html#2676127 题目: 1 public class text { ...

  4. Codeforces 519 E. A and B and Lecture Rooms

    Description 询问一个树上与两点距离相等的点的个数. Sol 倍增求LCA. 一棵树上距离两点相等,要么就只有两点的中点,要么就是与中点相连的所有点. 有些结论很容易证明,如果距离是偶数,那 ...

  5. js之DOM和事件

    DOM 查找 直接查找 var obj = document.getElementById('i1') 间接查找 文件内容操作: innerText 仅文本 innerHTML 全内容 value i ...

  6. intellij Idea快捷键

    CTRL+ALT+O  优化导入的类和包 Alt + Center  导入类,实现接口 CTRL+N   查找类CTRL+SHIFT+N  查找文件CTRL+SHIFT+ALT+N 查找类中的方法或变 ...

  7. phpcms的评论改为留言板研究

    研究背景: phpcms里面默认是没有留言板的,之前我的博客里发过一个二次开发简介,里面有一个简单的留言板,包含前台提供表单,后台留言审核等功能,但是不提供用户登录等操作. 研究思路: phpcms里 ...

  8. 如何解决phpcms后台验证码不显示的问题

    方法一: 主要在于是否开启gd库 查看办法 找到php.ini文件 搜索extension=php_gd2.dll这段代码(windows) 然后把前面的;符号去掉即可. centOS6.5中可能需要 ...

  9. IPC---共享内存

    共享内存就是允许两个或多个不相关的进程访问同一个逻辑内存.共享内存是在两个正在运行的进程之间共享和传递数据时,不需要在客户进程和服务器进程之间幅值,因此是最快的一种IPC.不同进程之间共享的内存通常安 ...

  10. 左侧导航栏复制粘贴保存html即可

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