JQuery--菜单

最新推荐文章于 2022-05-25 19:12:26 发布

陈海明hack

最新推荐文章于 2022-05-25 19:12:26 发布

阅读量178

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/chenhaiming123/article/details/97001553

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery.js"></script>

    <link href="menu.css" rel="stylesheet" type="text/css" />
 
    <script type="text/javascript" src="menu.js"></script>
</head>
<body>
    <div >
    <ul>
        <li class="main">
            <a href="#">菜单项1</a>
            <ul>
                <li>
                    <a href="#">菜11 </a>
                </li>
                <li><a href="#">菜12 </a></li>
            </ul>

        </li>
    </ul>
    <ul>
        <li class="main">
            <a href="#">菜单项2</a>
            <ul>
                <li><a href="#">菜21 </a> </li>
                <li> <a href="#">菜22 </a></li>
            </ul>

        </li>
    </ul>
    <ul>
        <li class="main">
            <a href="#">菜单项3</a>
            <ul>
                <li> <a href="#">菜31 </a></li>
                <li> <a href="#">菜32 </a> </li>
            </ul>

        </li>
    </ul>
</div>
    <br />
    <br />
    <br />
    <br />
    <br />
    
    <ul>
        <li class="hmain">
            <a href="#">菜单项1</a>
            <ul>
                <li>
                    <a href="#">菜11 </a>
                </li>
                <li><a href="#">菜12 </a></li>
            </ul>

        </li>
    </ul>
    <ul>
        <li class="hmain">
            <a href="#">菜单项2</a>
            <ul>
                <li><a href="#">菜21 </a> </li>
                <li> <a href="#">菜22 </a></li>
            </ul>

        </li>
    </ul>
    <ul>
        <li class="hmain">
            <a href="#">菜单项3</a>
            <ul>
                <li> <a href="#">菜31 </a></li>
                <li> <a href="#">菜32 </a> </li>
            </ul>

        </li>
    </ul>
</body>
</html>

JS:

$(document).ready(function(){
	//页面中的DOM已经装载完成时，执行的代码
	$(".main > a").click(function(){
		//找到主菜单项对应的子菜单项
		var ulNode = $(this).next("ul");
	
		ulNode.slideToggle();
		changeIcon($(this));
	});
	$(".hmain").hover(function(){
		$(this).children("ul").slideDown();
		changeIcon($(this).children("a"));
	},function(){
		$(this).children("ul").slideUp();
		changeIcon($(this).children("a"));
	});
});

/**
 * 修改主菜单的指示图标
 */
function changeIcon(mainNode) {
	if (mainNode) {
		if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) {
			mainNode.css("background-image","url('images/expanded.gif')");
		} else {
			mainNode.css("background-image","url('images/collapsed.gif')");
		}
	}
}

CSS：

ul, li {
	/*清除ul和li上默认的小圆点*/
	list-style: none;
}
ul {
	/*清除子菜单的缩进值*/
	padding: 0;
	margin: 0;
}
.main, .hmain {

    background-image: url('title.gif');
    background-repeat: repeat-x;
    width: 120px;
}
li {
	background-color: #EEEEEE;
}
a {
	/*取消所有的下划线*/
	text-decoration: none;
	padding-left: 20px;
	display: block;
	display: inline-block;
	width: 100px;
	padding-top: 3px;
	padding-bottom: 3px;
}
.main a, .hmain a {
    color: white;
    background-image: url('title.gif');
    background-repeat: no-repeat;
    background-position: 3px center;
}
.main li a, .hmain li a {
	color: black;
	background-image: none;
}
.main ul, .hmain ul {
	display: none;
}
.hmain {
	float: left;
	margin-right: 1px;
}

二、总结

（1）ulNode.slideToggle();

（1.1）slideToggle(duration?: number|string, complete?: Function): JQuery;

*以滑动动作显示或隐藏匹配的元素。
*
*@参数持续时间确定动画运行时间的字符串或数字。
*@param完成动画完成后调用的函数。

- duration (default: 400)
  
  Type: Number or String
  
  决定动画运行时间的字符串或数字。（默认值：400）
- - complete
    
    Type: Function()
    
    动画完成后调用的函数，每个匹配的元素调用一次。

（1.2）slideToggle(duration?: number|string, easing?: string, complete?: Function): JQuery;

以滑动动作显示或隐藏匹配的元素。
*
*@参数持续时间确定动画运行时间的字符串或数字。
*@参数释放一个字符串，指示要用于转换的释放函数。
*@param完成动画完成后调用的函数。

- easing (default: swing)
  
  Type: String
  
  A string indicating which easing function to use for the transition.

（1.3） slideToggle(options: JQueryAnimationOptions): JQuery;

*以滑动动作显示或隐藏匹配的元素。
*
*@参数选项要传递给方法的附加选项的映射。

options

Type: PlainObject

A map of additional options to pass to the method.要传递给方法的其他选项的映射。

duration (default: 400)

Type: Number or String

A string or number determining how long the animation will run.

（2）$(this).children("ul").slideDown();

/**
* Display the matched elements with a sliding motion.
*
* @param duration A string or number determining how long the animation will run.
* @param complete A function to call once the animation is complete.
* @see {@link https://api.jquery.com/slideDown/#slideDown-duration-complete}
*/
slideDown(duration?: number|string, complete?: Function): JQuery;
（3）$(document).ready(function()
/**
* Specify a function to execute when the DOM is fully loaded.
*指定一个在DOM完全加载时要执行的函数。
* @param handler A function to execute after the DOM is ready.
* @see {@link https://api.jquery.com/ready/}
*/
ready(handler: (jQueryAlias?: JQueryStatic) => any): JQuery;

（4）$(".hmain").hover(function()

悬停

.hover( handlerIn, handlerOut )

handlerIn

Type: Function( Event eventObject )

A function to execute when the mouse pointer enters the element.

鼠标指针进入元素时要运行的函数。

handlerOut

Type: Function( Event eventObject )

A function to execute when the mouse pointer leaves the element.

鼠标指针离开元素时要运行的函数。

/**
* Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.
*
* @param handlerIn A function to execute when the mouse pointer enters the element.
* @param handlerOut A function to execute when the mouse pointer leaves the element.
* @see {@link https://api.jquery.com/hover/#hover-handlerIn-handlerOut}
*/
hover(handlerIn: (eventObject: JQueryEventObject) => any, handlerOut: (eventObject: JQueryEventObject) => any): JQuery;
/**
* Bind a single handler to the matched elements, to be executed when the mouse pointer enters or leaves the elements.
*
* @param handlerInOut A function to execute when the mouse pointer enters or leaves the element.
* @see {@link https://api.jquery.com/hover/#hover-handlerInOut}
*/
hover(handlerInOut: (eventObject: JQueryEventObject) => any): JQuery;

（5）

.hmain {
float: left;/*浮动方向从左开始/
margin-right: 1px;
}

陈海明hack

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
6
评论
JQuery--菜单

一、实例<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="jquery.js"></script> ...
复制链接

扫一扫

专栏目录