Jquery5——二级菜单的收缩和展开-手动轮播图

目录

二级菜单的收缩和展开

手动轮播图

---

二级菜单的收缩和展开

HTML：

 		<div class="global_module procatalog">
                 <h3>产品分类</h3>
                 <ul class="m-treeview">
                     <li class="m-expanded" id="me1">
                         <span>衬衫</span>
                         <ul>
                             <li><span>短袖衬衫</span></li>
                             <li><span>长袖衬衫</span></li>
                         </ul>
                     </li>
                     <li class="m-expanded" id="me2">
                         <span>卫衣</span>
                         <ul>
                             <li><span>开襟卫衣</span></li>
                             <li><span>套头卫衣</span></li>
                         </ul>
                     </li>
                     <li class="m-expanded" id="me3">
                         <span>裤子</span>
                         <ul>
                             <li><span>休闲裤</span></li>
                             <li><span>免烫卡其裤</span></li>
                             <li><span>牛仔裤</span></li>
                             <li><span>短裤</span></li>
                         </ul>
                     </li>
                 </ul>
			<p class="module_up_down" id="zs2"><img src="images/down.gif" alt="" /></p>
		</div>

CSS：

.procatalog .m-treeview{
    background:#FFFFFF;
}
.procatalog .m-treeview li span {
    cursor: pointer;
}


.procatalog .m-treeview li.m-expanded {
	padding-left:16px;
	background:url('../images/treeview-expanded.gif') no-repeat 0 0;
}
.procatalog .m-treeview li.m-expanded ul li {
   list-style-image: url('../images/treeview-item.gif');
}



.procatalog .m-treeview li.m-collapsed {
    padding-left:16px;
    background:url('../images/treeview-collapsed.gif') no-repeat 0 0;
}
.procatalog .m-treeview li.m-collapsed ul{
    display:none;
}

Jquery：

    /*class简单版的左下二级菜单的收缩与展开*/
    $(function () {
        $(".m-treeview li").click(function () {
            /*获取当前的class*/
            var imgcss = $(this).attr("class");
            /*判断class的名字  如果class的名字是m-expanded，就重新赋值换称m-collapsed。(反之亦然)*/
            if (imgcss == "m-expanded") {
                /*重新赋值方法1*/
                $(this).attr("class", "m-collapsed");
                /*重新赋值方法2
                $("#me1").addClass("m-collapsed").removeClass("m-expanded");*/
            } else {
                /*重新赋值方法1*/
                $(this).attr("class", "m-expanded");
                /*重新赋值方法2
                $("#me1").addClass("m-expanded").removeClass("m-collapsed");*/
            }

        })
    })

手动轮播图

 

html:

    <div class="content_right">
        <div class="ad">
            <ul class="slider">
                <li><img src="images/ads/1.gif" /></li>
                <li><img src="images/ads/2.gif" /></li>
                <li><img src="images/ads/3.gif" /></li>
                <li><img src="images/ads/4.gif" /></li>
                <li><img src="images/ads/5.gif" /></li>
            </ul>
            <ul class="num">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
    </div>

css：

.content_right .ad { 
	margin-bottom:10px;
	width:586px; 
	height:150px; 
	overflow:hidden;
	position:relative;
}
.content_right .slider,.content_right .num{
	position:absolute;
}
.content_right .slider li{ 
	list-style:none;
	display:inline;
}
.content_right .slider img{ 
	width:586px; 
	height:150px;
	display:block;
}
.content_right .num{ 
	right:5px; 
	bottom:5px;
}
.content_right .num li{
	float: left;
	color: #FF7300;
	text-align: center;
	line-height: 16px;
	width: 16px;
	height: 16px;
	font-family: Arial;
	font-size: 12px;
	cursor: pointer;
	overflow: hidden;
	margin: 3px 1px;
	border: 1px solid #FF7300;
	background-color: #fff;
}


/*鼠标移动到数字上的样式*/
.content_right .num li.on{
	color: #fff;
	line-height: 21px;
	width: 21px;
	height: 21px;
	font-size: 16px;
	margin: 0 1px;
	border: 0;
	background-color: #FF7300;
	font-weight: bold;
}

Jquery：

    手动轮播图
    $(function () {
        $(".num li").bind("click mouseover", function () {
            var index = $(this).index();
            $(".slider").animate({
                "top":-(150)*index+"px"
            })
            //添加鼠标移动到数字上的class
            $(this).addClass("on").siblings().removeClass("on");
        })
    })