<!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. this.getServletContext().getRealPath("WEB-INF");

    this.getServletContext().getRealPath("WEB-INF");

  2. Cocos2d-x 3.2 项目源代码从Mac打包到安卓教程【转自：http://www.2cto.com/kf/201410/342649.html】

    当我们用Xcode写好一个项目的源码之后,如何将它导入到安卓手机中呢?下面我来给大家一步一步讲解: 首先,我们打开终端,cd到Cocos2d-x 3.2文件夹中(注意不是你写的项目文件夹,而是官方项目 ...

  3. NOIP“对偶”题：还教室

    先说一下思路: 方差可以经过恒等变形变成 x12 + x22 + ... + xn2 + 2a(x1 + x2 + ... + xn) + na2 所以维护平方和.连续和即可 平均数我就不再推了…… ...

  4. ORA-14402: 更新分区关键字列将导致分区的更改

    默认情况下,oracle的分区表对于分区字段是不允许进行update操作的,如果有对分区字段行进update,就会报错——ORA-14402: 更新分区关键字列将导致分区的更改.這種情況可以通過開啟表 ...

  5. Sqli-LABS通关笔录-4

    这一关卡让我学习到了 1.管他如何,想方设法先让sql报错再说.从报错中构造sql注入语句. 2.单引号不行就来双引号.括号等等的. 这次单引号没反应了.以后我们先来黑盒测试,实在没辙再看代码. -1 ...

  6. pro*c添加SQLCHECK后编译报错PLS-S-00201

    如果在pro*c中调用数据库了里的函数,就需要在proc的cfg配置文件中添加一行: SQLCHECK=SEMANTICS 但是添加之后又会出现PLS-S-00201错误,原因在与添加SQLCHECK ...

  7. WebStorm设置手机测试服务器-局域网内其他设备访问

    前端开发中,经常需要将做好的页面给其他同事预览或手机测试,之前一直用的第三方本地服务器usbwebserver,偶然了解到WebStorm内置服务器也可以满足此需求,来看看如何设置吧~~ 1.端口更改 ...

  8. ndk学习9: 动态使用共享库

    动态使用共享库函数 dll_main      环境介绍 续上节代码 目录结构:   android.mk如下: LOCAL_PATH := $(call my-dir) include $(CLEA ...

  9. IntelliJ IDEA License Server本地搭建教程

    Licence地址直接填入 http://idea.qinxi1992.cn/ http://jetbrains.tencent.click 直接破解 本地教程: 2016年3月20日更新支持自定义端 ...

  10. POCO浅探

    POCO作用类似于POJO.POJO的内在含义是指那些从来没有任何类继承.也没有实现任何接口,更是没有被其他框架侵入的JAVA对象.POCO的含义与此是一致的.POJO的意义就在于它的简单灵活性,能够 ...