Jquery ul下拉框效果

最新推荐文章于 2020-08-28 18:02:49 发布
最新推荐文章于 2020-08-28 18:02:49 发布
阅读量395 收藏
点赞数
分类专栏： jquery 文章标签： jquery html ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a52071453/article/details/84340154
版权

　　html select下拉框样式在网站开发时很难控制，网上找的模仿下拉框效果代码太长而且和Jquery有这严重的冲突，于是自己写了一个ul下拉框效果，代码很短也很简单。

 

　　select.htm

<!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>
    <title></title>
    <link href="Css/DropDownStyle.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Js/DropDown.js" type="text/javascript"></script>
</head>
<body>
 <ul id="uboxstyle" style=" float:left; margin-top:6px; position:relative;">
              <li class="uboxstyle_Selected">查商品</li>
              <li class="uboxstyle5">查商品</li>
              <li class="uboxstyle5">查商家</li>
              <li class="uboxstyle5">查服务</li>
              <li class="uboxstyle4">查人员</li>
              </ul>
</body>
</html>

 

 

　　DropDown.js

/// <reference path="../Scripts/jquery-1.4.1-vsdoc.js" />

 

//缺少鼠标离开，下拉框自动合拢写法

//搜索下列
$(function () {
    li_hide();
    //鼠标移到移开交替显示
    $("#uboxstyle>li").first().hover(function () {
        DropDownStyle($(this), "uboxstyle_Selecting");
    }, function () {
        DropDownStyle($(this), "uboxstyle_Selected");
    });

    //展开下拉控件的样式
    $("#uboxstyle>li").first().click(function () {
        DropDownStyle($(this), "uboxstyle_Select");
        li_ctrl();
    });

    //在下拉控件中操作
    $("#uboxstyle>li").each(function () {
        if ($("#uboxstyle>li").index($(this)) > 0) {
            //鼠标移动
            $(this).hover(function () {
                DropDownStyle($(this), "uboxstyle6");
            }, function () {
                DropDownStyle($(this), "uboxstyle5");
            });
            //鼠标点击
            $(this).click(function () {
                $("#uboxstyle>li:eq(0)").html($(this).html());
                li_hide();
            });
        }
    });

    //为控件设置样式
    function DropDownStyle($ctrl, styleName) {
        $ctrl.attr("className", styleName);
    }

    //显示
    function li_hide() {
        $("#uboxstyle>li:gt(0)").hide();
    }

    //控制显示隐藏
    function li_ctrl() {
        if ($("#uboxstyle>li:eq(1)").is(":hidden")) {
            li_show();
        }
        else {
            li_hide();
            DropDownStyle($("#uboxstyle>li:eq(0)"), "uboxstyle_Selecting");
        }
    }

    //隐藏
    function li_show() {
        $("#uboxstyle>li:gt(0)").show();
    }
});

 

　　DropDownStyle.css

body
{
    padding:0px;
    margin:0px;
}

 

/* 选项卡搜索 开始*/
#uboxstyle{width:118px; height:30px}
.uboxstyle_Selected{
    display:block;
    color:#447004;
    width:98px;
    height:30px;
    padding:0px 10px;
    line-height:30px;
    background-color: transparent;
    background-image: url(../Images/home_search1.gif);
    background-repeat: no-repeat;
    background-position: 0 0;
     text-align:center;
     line-height:30px;
     cursor:hand;
}
.uboxstyle_Selecting{
    display:block;
    color:#447004;
    width:98px;
    height:30px;
    padding:0px 10px;
    line-height:30px;
    font-size:14px;
    background-color: transparent;
    background-image: url(../Images/home_search1.gif);
    background-repeat: no-repeat;
    background-position: 0px -30px;
     text-align:center;
     line-height:30px;
     cursor:hand;
}
.uboxstyle_Select{
    display:block;
    color:#447004;
    width:98px;
    padding:0 10px;
    line-height:30px;
    font-size:14px;
    background-image: url(../Images/home_search1.gif);
    background-repeat: no-repeat;
    background-position: 0 0;
     text-align:center;
     line-height:30px;
}

.uboxstyle5:hover {
    display:block;
    width:96px;
    height:30px;
    padding:0 10px;
    text-decoration:none;
    line-height:30px;
    font-size:14px;
    color:#FFF;
    background-color: #88C302;
    text-align:center;
    line-height:30px;
    cursor:hand;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #d0d0d0;
    border-left-color: #d0d0d0;
}
.uboxstyle4{
    display:block;
    width:116px;
    height:30px;
    text-decoration:none;
    line-height:30px;
    font-size:14px;
    color:#447004;
    background-color: #ffffff;
    text-align:center;
    line-height:30px;
    cursor:hand;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #d0d0d0;
    border-left-color: #d0d0d0;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #d0d0d0;
}

.uboxstyle4:hover {
    display:block;
    width:96px;
    height:30px;
    padding:0 10px;
    text-decoration:none;
    line-height:30px;
    font-size:14px;
    color:#FFF;
    background-color: #88C302;
    text-align:center;
    line-height:30px;
    cursor:hand;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #d0d0d0;
    border-left-color: #d0d0d0;
}
.uboxstyle5{
    display:block;
    width:96px;
    height:30px;
    padding:0 10px;
    text-decoration:none;
    line-height:30px;
    font-size:14px;
    color:#447004;
    background-color: #ffffff;
    text-align:center;
    line-height:30px;
    cursor:hand;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #d0d0d0;
    border-left-color: #d0d0d0;
}
.uboxstyle6{
    color:#ffffff;
    background-color: transparent;
    background-image: url(../Images/home_search1.gif);
    background-repeat: no-repeat;
        background-position: 0px -90px;
     width:118px;
     height:30px;
     text-align:center;
     line-height:32px;
     cursor:hand;
}
.uboxstyle7{
    background-image: url(../Images/home_search1.gif);
    background-repeat: no-repeat;
        background-position: 0px -120px;
    color:#fff
}

/* 选项卡搜索 结束*/

a52071453
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery+ul实现漂亮竖直下拉菜单
06-26
jQuery+ul实现漂亮竖直下拉菜单，这是一款非常常见的漂亮的下拉菜单
jq下拉框ul搜索数据
九亿宅男的梦的博客
09-10 297
<div> <select class="select"> <option value="2019">2019</option> <option value="2018">2018</option> <option value...
ul+jquery自定义下拉选择框
liudanyang_21的博客
08-28 264
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>ul+jquery实现下拉选择框</title> <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <style.
ul下拉菜单
11-15
五种实用简洁的系统头部下拉菜单框，使用ul列表实现。
jQuery结合UL标签下拉框美化特效代码
03-20
"jQuery结合UL标签下拉框美化特效代码"就是一个旨在提升用户体验的解决方案，它摒弃了传统的`<select>`标签，转而利用HTML的`<ul>`列表和`<input>`输入框来构建一个可自定义样式的下拉选择器。这种技术让开发者能够...
jQuery自定义多选下拉框效果
10-19
在本文中，我们将深入探讨如何使用jQuery来实现一个自定义的多选下拉框效果。这个功能对于增强用户界面的交互性和美观性至关重要，尤其是在处理大量选项时。下面，我们将详细解析实现这一功能的关键步骤、涉及到的...
jquery模拟SELECT下拉框取值效果
12-09
在这个例子中，开发者使用jQuery模拟了一个SELECT下拉框的效果，以便自定义样式和交互行为。下面我们将详细解释这个示例中的关键知识点。 1. **HTML结构**： - 页面使用了`<div>`标签来创建一个容器，id为...
jQuery模拟下拉框选择对应菜单的内容
10-20
在本文中，我们将深入探讨如何使用jQuery来模拟下拉框选择菜单的功能，这对于网页界面设计尤其有用，可以提供更友好的用户体验。下拉框在网页交互中常常用于节省空间并保持页面整洁，尤其是在有很多选项可供选择时。...
jQuery ul标签下拉菜单演示代码
10-28
jQuery ul标签下拉菜单演示代码，需要使用基于jquery的下拉菜单效果的朋友可以参考下。
jQuery自定义下拉框选择列表 5款炫酷样式
05-15
jQuery自定义下拉框选择列表 5款炫酷样式
jQuery实现select下拉框样式美化效果
05-12
内容索引:脚本资源,jQuery,Select,下拉框美化　　jQuery实现select下拉框样式美化效果，这是个挺实用的网页美化技巧，现在jquery很流行，用它不但可以实现交互的Ajax效果，同时也可用来美化表单元素，像下拉框，单选框，复选框以及文本框等，本代码就是一个美化Select的实例，希望朋友们下载一起研究。
小清新的 jQuery select 下拉框样式美化效果
08-08
小清新的jquery select 下拉框样式美化效果，和默认的下拉框相比，是不是漂亮了许多，我觉得这种更灵活吧，不但样式好看，而且也便于和你网页风格的融合，再些感谢作者的分享。
CSS jQuery用ul模拟select下拉列表菜单效果.rar
07-09
CSS jQuery用ul模拟select下拉列表菜单效果，将表单中常用的Select列表框变换了样式，更加漂亮了，而且引入了jQuery，加上了动画效果，在下拉的时候，自动向下滑出，使Select不那么呆板了。
Jquery制作--美化下拉框
weixin_30787531的博客
02-01 120
平常我们用的原生select下拉框，大部分样式没办法修改，导致在不同的浏览器里面会跟设计图的风格大相径庭。所以为了能让它美化起来，就用JQ模拟了一个下拉框，可以随意定义样式。原生的下拉框也保留在div里面隐藏着，方便后台开发人员对其进行操作。效果图如下： HTML代码如下： <!DOCTYPE html> <html lang="zh-CN">...
jQuery自定义漂亮的下拉框插件8种效果演示
afsgwqke的博客
11-25 2168
原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 实例代码下载 Java代码      "en" class="no-js">                  "UTF-8" />           "X-UA-Compatible" content="IE=edge">           "viewport" 
jquery隐藏下拉框
最新发布
12-14
使用jQuery隐藏下拉框可以通过以下步骤实现： 1. 首先，确保页面已经引入了jQuery库文件。 2. 在HTML中，给下拉框添加一个唯一的id或class属性，方便通过jQuery选择器选择到该下拉框。 3. 使用jQuery的选择器选中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值