本文目录
- jquery给下拉框设置默认值
- jquery下拉菜单怎么做，一个简单的纯手写例子
- 用jquery怎么样实现下点击其他地方下拉菜单
- jquery实现漂亮的二级下拉菜单代码
- jquery实现平滑的二级下拉菜单效果
- Jquery实现级联下拉菜单
jquery给下拉框设置默认值
jquery设置下拉框的默认值可以直接使用val方法进行设置。
val方法可以设置表单元素的值，不管是输入框还是下拉菜单，都是用一样的设置方法。
jquery下拉菜单怎么做，一个简单的纯手写例子
slideDown(),slideUp()
事件就用mouseenter mouseleave
《!DOCTYPE html》
《html》
《head》
《meta charset=“UTF-8“》
《title》《/title》
《style type=“text/css“》
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-image: url(imgs/bg.jpg);
}
.wrap li{
background-image: url(imgs/libg.jpg);
}
.wrap 》 ul 》 li {
float: left;
margin-right: 10px;
position: relative;
}
.wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}
.wrap li ul {
position: absolute;
top: 30px;
display: none;
}
《/style》
《script src=“jq.js“》《/script》
《script type=“text/javascript“》
$(function(){
// 分析思路:将鼠标到任何一个li上面 让对应的li里面的ul 显示 让其他的 li里面的ul隐藏
// 1 给所有的.wrap》ul》li 添加注册鼠标移上事件 mouseover
$(“.wrap》ul》li“).mouseover(function(){
// 2 让它里面的直接子元素ul 去滑入
$(this).children(“ul“).stop().slideDown();
})
//2 给所有的.wrap》ul》li 添加注册鼠标移出事件 mouseout
$(“.wrap》ul》li“).mouseout(function(){
// 2 让它里面的直接子元素ul 去滑出
$(this).children(“ul“).stop().slideUp();
})
})
《/script》
《/head》
《body》
《div class=“wrap“》
《ul》
《li》
《a href=“javascript:;“》一级菜单1《/a》
《ul class=“ul“》
《li》
《a href=“javascript:;“》二级菜单11《/a》
《/li》
《li》
《a href=“javascript:;“》二级菜单12《/a》
《/li》
《li》
《a href=“javascript:;“》二级菜单13《/a》
《/li》
《/ul》
《/li》
《li》
《a href=“javascript:;“》一级菜单2《/a》
《ul》
《li》
《a href=“javascript:;“》二级菜单21《/a》
《/li》
《li》
《a href=“javascript:;“》二级菜单22《/a》
《/li》
《li》
《a href=“javascript:;“》二级菜单23《/a》
《/li》
《/ul》
《/li》
《li》
《a href=“javascript:;“》一级菜单3《/a》
《ul》
《li》
《a href=“javascript:;“》二级菜单31《/a》
《/li》
《li》
《a href=“javascript:;“》二级菜单32《/a》
《/li》
《li》
《a href=“javascript:;“》二级菜单33《/a》
《/li》
《/ul》
《/li》
《/ul》
《/div》
《/body》
《/html》
-jquery下拉菜单
用jquery怎么样实现下点击其他地方下拉菜单
我能想到的就是 , 现将HTML菜单写好 然后 给 需要点击的标签用jQuery 增加点击实现, 点击的时候判断 菜单是隐藏的还是显示的 , 如果是隐藏的就让他显示 ,如果是显示的就让他隐藏给你一份js写的吧没有 jQuery 的-jquery下拉菜单
《!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN“ “http://www.w3.org/TR/html4/strict.dtd“》
《html》
《head》
《meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8“》
《title》Untitled Document《/title》
《/head》
《body id=“bodyid“ 》
《input type=“button“ value=“点我“ id=“b“ 》
《div id=“bb“ style=“background-color:red;width:500px;height:500px;display:none;“ 》《/div》
《script type=“text/javascript“》
document.getElementById(“b“).onclick = function(){
var style = document.getElementById(“bb“).style;
var displ = style.display;
if(displ == ““ || displ == “none“){
style.display = “block“;
}else{
style.display = “none“;
}
}
《/script》
《/body》
《/html》
-jquery下拉菜单
jquery实现漂亮的二级下拉菜单代码
本文实例讲述了jquery实现漂亮的二级下拉菜单代码。分享给大家供大家参考。具体如下：
这里介绍一款基于jquery实现的网站下拉菜单，黑色风格，很漂亮，本菜单需要点击主菜单后的小三角符号才下拉出二级菜单，并不是有些菜单，是鼠标移上主菜单的时候就滑过，至于哪一种，就看个人的喜好了
先来看看运行效果：
在线演示地址如下：
-jquery下拉菜单
jquery实现平滑的二级下拉菜单效果
本文实例讲述了jquery实现平滑的二级下拉菜单效果。分享给大家供大家参考。具体如下：
这是一款使用了jQuery实现的二级菜单特效，灰色风格，颜色自己不喜欢的就自己动动手吧，CSS代码经过了优化，水平高的自己拿出修改吧，这是一个在国外前端设计网站找到的导航菜单效果，希望大家喜欢。
运行效果截图如下：
在线演示地址如下：
-jquery下拉菜单
Jquery实现级联下拉菜单
用combobox的onSelect事件，动态加载
$(“#id1“).combobox({
onSelect:function(record){
$(’#id2’).combobox({
url:’’
valueField : ’id’,
textField : ’text’ });
}
});//id1是你省combobox的id，id2是你市combobox的id
-jquery下拉菜单
