<!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本地化多语言支持

    右键 -> new file -> resources -> strings file 一定要命名为: Localizable.strings 点击这个文件 -> xocde ...

  2. Android中的“再按一次返回键退出程序”实现

    用户退出应用前给出一个提示是很有必要的,因为可能是用户并不真的想退出,而只是一不小心按下了返回键,大部分应用的做法是在应用退出去前给出一个Dialog,我觉得这样不太友好,用户还得移动手指去按dial ...

  3. SVN版本冲突解决

    解决冲突有三种选择: A.放弃自己的更新,使用svn revert(回滚),然后提交.在这种方式下不需要使用svn resolved(解决) B.放弃自己的更新,使用别人的更新.使用最新获取的版本覆盖 ...

  4. 浅谈VBA

    VBA,全称Visual Basic for Applications,其中的一些专业性的解释可以自行搜索,这里就不一一介绍.半年以前,我是不知道VBA的,当我听到VBA的时候,我却迷糊了.VBA是什 ...

  5. 2016年10月12日--string、Math类、Random随机数、DateTime、异常保护

    string string.length; //得到string长度 string.Trim(); //去掉string前后的空格 string.TrimStart(); //去掉string前的空格 ...

  6. CCF 模拟D 动态规划

    http://115.28.138.223:81/view.page?opid=4 这道题写的我醉醉的,想建一棵指定深度的树最后统计满足条件的个数 居然没去考虑这样必然超时!!!代码写的也是醉了,把没 ...

  7. BZOJ 3665: maths

    Sol 矩阵乘法+快速幂+欧拉定理. 首先观察题目可以发现 \(A_n\) 可以表示成关于 \(K\) 和 \(A_0\) 的几次幂的形式. \(A_0\) 就比较简单了 \(m^n\) 所以第一部分 ...

  8. windows下的getopt/getoptlong函数

    windows下的getopt/getoptlong函数 getopt/getopt_long函数是GNU C中的函数,在linux编程中很常用到.这里就不介绍了. windows下没有找到类似的函数 ...

  9. linux下VMware安装出现的问题解决

    linux下VMware安装出现的问题解决 linux下VMware安装出现的问题解决 报错信息 问题1liboverlay-scrollbar.so和libunity-gtk-module.so加载 ...

  10. 阻止a标签默认跳转事件

    1:<a href="####"></a> 2:<a href="javascript:void(0)"></a> ...