<!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. DP~数塔（hrbustoj1004)

    aaarticlea/bmp;base64,iVBORw0KGgoAAAANSUhEUgAAAtQAAAPgCAYAAAASsev/AAAgAElEQVR4nOzdf4w0x33n9/4rQP4L8s

  2. Android 内容提供器（Content Provider）介绍

    内容提供器(Content Provider)主要用于在不同的应用程序之间实现数据共享的功能,它提供了一套完整的机制,允许一个程序访问另一个程序中的数据,同时还能保证被访问数据的安全性.目前,使用内容 ...

  3. 字符串驱动技术—— MethodAddress , MethodName , ObjectInvoke

    首先看一段Delphi帮助中的介绍(After Delphi 6 ): Returns the address of a published method. class function Method ...

  4. 为什么要继承ActionSupport？

    struts2中的action可以继承ActionSupport,也可以不继承ActionSupport.不继承ActionSupport的情况只需要有一个方法,返回String,即可,记住,在继承A ...

  5. 4.9---二叉树路径和（CC150）

    //注意,1,要判断null:2,要注意ArrayList直接复制会被一起改变.要通过new的方式来操作.public class Solution { public static void main ...

  6. Java BigDecimal使用

    //除法:精确到后4位BigDecimal a = new BigDecimal(1213); BigDecimal b = new BigDecimal(10302); BigDecimal rat ...

  7. jquery数组内多维对象

    jquery数组内多维对象 var postData=[],obj,list; obj = !!obj ? obj : $('#dist_meici_checkinfo_form'); obj.fin ...

  8. java微信接口之——获取access_token

    本文转自http://www.cnblogs.com/always-online/category/598553.html 一.微信获取access_token接口简介 1.请求:该请求是GET方式请 ...

  9. Delete a node from BST

    Given a root node reference of a BST and a key, delete the node with the given key in the BST. Retur ...

  10. MVC RadioButton

    本文介绍如何创建radiobutton. Step 1: 创建一个类用于获取所有的选项. public class Company { public string SelectedDepartment ...