二级菜单-----梅花

最新推荐文章于 2023-02-23 22:59:26 发布

AAAAA人人爱

最新推荐文章于 2023-02-23 22:59:26 发布

阅读量167

点赞数

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/m0_49301210/article/details/109081470

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

HTML代码

<body>

<div id="my_menu" class="sdmenu">
    <div>
        <span class="menuSpan">在线工具</span>
        <a href="#">图像优化</a>
        <a href="#">收藏夹图标生成器</a>
        <a href="#">邮件</a>
        <a href="#">htaccess密码</a>
        <a href="#">梯度图像</a>
        <a href="#">按钮生成器</a>
    </div>
    <div class="collapsed">
        <span class="menuSpan">支持我们</span>
        <a href="#">推荐我们</a>
        <a href="#">链接我们</a>
        <a href="#">网络资源</a>
    </div>
    <div class="collapsed">
        <span class="menuSpan">合作伙伴</span>
        <a href="#">JavaScript工具包</a>
        <a href="#">CSS驱动</a>
        <a href="#">CodingForums</a>
        <a href="#">CSS例子</a>
    </div>
    <div class="collapsed">
        <span class="menuSpan">测试电流</span>
        <a href="#">Current or not</a>
        <a href="#">Current or not</a>
        <a href="#">Current or not</a>
        <a href="#">Current or not</a>
    </div>
</div>

css代码

 * {
   margin: 0;
   padding: 0;
   list-style-type: none;
  }
a,img {
    border: 0;
    text-decoration: none;
  }

body {
   font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
}
div.sdmenu {
	width: 150px;
	margin: 0 auto;
	font-family: Arial, sans-serif;
	font-size: 12px;
	padding-bottom: 10px;
	background: url(bottom.gif) no-repeat right bottom;
	color: #fff;
}

div.sdmenu div {
	background: url(title.gif) repeat-x;
	overflow: hidden;
}

div.sdmenu div:first-child {
	background: url(toptitle.gif) no-repeat;
}

div.sdmenu div.collapsed {
	height: 25px;
}

div.sdmenu div span {
	display: block;
	height: 15px;
	line-height: 15px;
	overflow: hidden;
	padding: 5px 25px;
	font-weight: bold;
	color: white;
	background: url(expanded.gif) no-repeat 10px center;
	cursor: pointer;
	border-bottom: 1px solid #ddd;
}

div.sdmenu div.collapsed span {
	background-image: url(collapsed.gif);
}

div.sdmenu div a {
	padding: 5px 10px;
	background: #eee;
	display: block;
	border-bottom: 1px solid #ddd;
	color: #066;
}

div.sdmenu div a.current {
	background: #ccc;
}

div.sdmenu div a:hover {
	background: #066 url(linkarrow.gif) no-repeat right center;
	color: #fff;
	text-decoration: none;
}

3.js代码

<script>
    window.onload = function(){
        /*
        * 每个菜单都是一个div
        * 通过collapsed类名来控制  有这个类名的时候  是关闭的  没有这个类名的时候是打开
        * */

        //获取页面所有的menuSpan
        var menuSpan = document.querySelectorAll('.menuSpan');

        //定义一个变量 来保存当前打开的菜单
        var openDiv = menuSpan[0].parentNode;
        for(var i = 0;i < menuSpan.length;i++){
            menuSpan[i].onclick = function(){
                var parentDiv = this.parentNode;
                toggleMenu(parentDiv);

                //如果openDiv是打开状态的话要关闭
                if(openDiv != parentDiv && !hasClass(openDiv,'collapsed')){
                    toggleMenu(openDiv);
                }
                openDiv = parentDiv;
            }
        }


        function toggleMenu(obj){
            var begin = obj.offsetHeight;
            toggleClass(obj,'collapsed');
            var end = obj.offsetHeight;
            obj.style.height = begin + 'px';

            move(obj,'height',end,10,function(){
                obj.style.height = '';
            });
        }
    }
</script>

4.move.js代码

function move(obj,attr,target,speed,callback){
    //关闭上一个定时器
    clearInterval(obj.timer);
    //获取当前的位置
    var current = parseInt(getStyle(obj,attr));

    if(current > target){
        speed = -speed;
    }

    //开启一个定时器  用来匀速改变left的值
    obj.timer = setInterval(function(){
        //获取box原来的left值
        var oldValue = parseInt(getStyle(obj,attr));
        // console.log(oldValue);
        var newValue = oldValue + speed;

        //将新新值赋给box
        obj.style[attr] = newValue + 'px';

        //向右移动的时候  newValue小于目标位置的值
        //向左移动的时候  newValue大于目标位置的值
        if(speed > 0 && newValue >= target || speed < 0 && newValue <= target){
            clearInterval(obj.timer);
            callback && callback();
        }
    },30)
}

/*
* 读取元素当前样式
* 参数  obj  要获取样式的元素
*      name  要获取的样式名
* */
function getStyle(obj,name){
    if(window.getComputedStyle){
        return getComputedStyle(obj,null)[name];
    }else{
        return obj.currentStyle[name];
    }
}


/*
       * 定义一个函数 用来向元素中添加指定的class属性
       *
       * 参数
       * obj  要添加的class属性的元素
       * cn  要添加的类名
       * */
function addClass(obj,cn){
    if (!hasClass(obj,cn)){
        obj.className += " " + cn;
    }
}

/*判断一个元素是否含有指定class*/
function hasClass(obj,cn){
    var reg = new RegExp("\\b"+cn+"\\b");
    return reg.test(obj.className);
}

/*
* 删除一个元素指定的class
*
* */

function removeClass(obj,cn){
    if(hasClass(obj,cn)){
        var reg = new RegExp("\\b"+cn+"\\b");
        obj.className = obj.className.replace(reg,"");
    }
}

/*
* 如果元素有该类  则删除
* 如果元素没有  给加上
* */
function toggleClass(obj,cn){
    if(hasClass(obj,cn)){
        removeClass(obj,cn);
    }else{
        addClass(obj,cn);
    }
}