js基础7 增加删除替换类/二级菜单

木一叶liuyue

已于 2022-07-23 11:34:27 修改

阅读量1.2k

点赞数 1

分类专栏：前段文章标签： js css 媒体

于 2022-03-29 16:24:34 首次发布

本文链接：https://blog.csdn.net/Kerryliuyue/article/details/123824442

版权

前段专栏收录该内容

47 篇文章 0 订阅

订阅专栏

增加删除替换类

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类的操作</title>
    <script>
        window.onload = function () {
            var btn01 = document.getElementById("btn01");
            var box = document.getElementById("box");
            btn01.onclick = function () {
            /*通过style修改box的样式，每修改一次，浏览器就渲染一次页面
                        box.style.width = 200 + "px";
                        box.style.backgroundColor = "yellow";  
                通过一行代码同时修改多个样式,通过class属性间接影响样式

                        使用+=，记得b2前面加一个空格
                        box.className+=" b2";
            */
                // addClass(box, "b2");
                // alert(hasClass(box,"b2"));
                // removeClass(box, "b2");
                toggleClass(box, "b2");
            }
        }

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

        }
        /*判定一个元素中是否有指定的元素值
            如果有，返回true
        创建一个正则表达式,
            \b表示单词边界，有b2，并且b2独立存在，不是b2016这种无法判断的
            斜杠是用\\表示的
        */
        function hasClass(obj, cn) {
           //如果带有变量，正则表达式尽量这样写
            var reg = new RegExp("\\b" + cn + "\\b");
            return reg.test(obj.className);
        }

        function removeClass(obj, cn) {
            var reg = new RegExp("\\b" + cn + "\\b");
            // 删除reg
            obj.className = obj.className.replace(reg, "");
        }
            /*用来切换一个类，
                如果元素中有这个类，就删除
                如果元素中没有这个类，就添加
            */      function toggleClass(obj, cn) {
            if (hasClass(obj, cn)) {
                removeClass(obj, cn);
            }
            else {
                addClass(obj, cn);
            }
        }
    </script>
</head>
<style>
    .b1 {
        width: 100px;
        height: 100px;
        background-color: #bfa;
    }

    .b2 {

        height: 200px;
        background-color: rgb(231, 29, 140);
    }
</style>

<body>
    <button id="btn01">点击按钮以后修改box样式</button>
    <br><br>
    <div id="box" class="b1 b2"></div>
</body>

</html>

二级菜单.css


  div.sdmenu {
	width: 150px;
	margin: 0 auto;
	font-family: Arial, sans-serif;
	font-size: 12px;
	padding-bottom: 10px;
	background: url("../picture/clock.png") no-repeat right bottom;
	color: rgb(228, 20, 20);
}
 
div.sdmenu div {
	background:url("../picture/clock.png") repeat-x;
	overflow: hidden;
}
 
div.sdmenu div:first-child {
	background: url("../picture/clock.png") 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: rgb(212, 22, 22);
	background: url("../picture/clock.png") no-repeat 10px center;
	cursor: pointer;
	border-bottom: 1px solid #ddd;
}
 
div.sdmenu div.collapsed span {
	background-image:url("../picture/tb\ \(1\).png");
}
 
div.sdmenu div a {
	padding: 5px 10px;
	background: #eee;
	display: block;
	border-bottom: 1px solid #ddd;
	color: #066;
    text-decoration: none;
}
 
div.sdmenu div a.current {
	background: #ccc;
}
 
div.sdmenu div a:hover {
	background: #066 url("../picture/clock.png") no-repeat right center;
	color: #fff;
	/* text-decoration: none; */
}

二级菜单.js

function move(obj, attr, target, speed, callback) {
    //关闭上一次定时器
    clearInterval(obj.timer);
    /*判断speed的正负值
    向右移动，正值
    向左移动，负值*/
    var current = parseInt(getStyle(obj, attr));
    if (current > target) {//想向左移
        speed = -speed;
    }
    //开启定时器

    //向执行动画的对象中添加一个timer属性，用来保存它自己的定时器标识
    obj.timer = setInterval(function () {

        var oldValue = parseInt(getStyle(obj, attr));

        //在旧值的基础上修改,并赋值
        var newValue = oldValue + speed;

        //当元素移动到800px，停止
        if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
            newValue = target;
        }
        //因为attr是个变量，所以修改的时候要加上【】
        obj.style[attr] = newValue + "px";
        if (newValue == target) {
            clearInterval(obj.timer);
            /*动画执行完毕，调用回调函数
            如果传回调函数了，就执行，如果没传回调函数，不执行
            */
            callback && callback();
        }

    }, 30);
}



/*放在全局作用域里面
自行定义函数，获取现在的样式
变量用【】声明
第二个参数，记得用"width",""
*/

function getStyle(obj, name) {
    if (window.getComputedStyle) {

        //正常浏览器
        return getComputedStyle(obj, null)[name];
    }

    else {//IE8的方式
        return obj.currentStyle[name];

    }

}



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

}
/*判定一个元素中是否有指定的元素值
    如果有，返回true
创建一个正则表达式,
    \b表示单词边界，有b2，并且b2独立存在，不是b2016这种无法判断的
    斜杠是用\\表示的
*/
function hasClass(obj, cn) {
    //var reg = /\bcn\b/;
    var reg = new RegExp("\\b" + cn + "\\b");
    return reg.test(obj.className);
}

function removeClass(obj, cn) {
    var reg = new RegExp("\\b" + cn + "\\b");
    // 删除reg
    obj.className = obj.className.replace(reg, "");
}
/*用来切换一个类，
    如果元素中有这个类，就删除
    如果元素中没有这个类，就添加
*/
function toggleClass(obj, cn) {
    if (hasClass(obj, cn)) {
        removeClass(obj, cn);
    }
    else {
        addClass(obj, cn);
    }
}

二级菜单.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>二级菜单</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
 
			a,
			img {
				border: 0;
				text-decoration: none;
			}
 
			body {
				font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
			}
		</style>
		<link rel="stylesheet" type="text/css" href="./css/menu.css" />
		<script type="text/javascript" src="./script/script.js"></script>
		<script type="text/javascript">
			window.onload = function() {
				/*
				 * 我们的每一个菜单都是一个div
				 * 	当div具有collapsed这个类时，div就是折叠的状态
				 * 	当div没有这个类是，div就是展开的状态
				 */
 
				/*
				 * 点击菜单，切换菜单的显示状态
				 */
				//获取所有的class为menuSpan的元素
				var menuSpan = document.querySelectorAll(".menuSpan");
 
				//定义一个变量，来保存当前打开的菜单
				var openDiv = menuSpan[0].parentNode;
 
				//为span绑定单击响应函数
				for (var i = 0; i < menuSpan.length; i++) {
					menuSpan[i].onclick = function() {
						//this代表我当前点击的span
						//获取当前span的父元素
						var parentDiv = this.parentNode;
 
						//切换菜单的显示状态
						toggleMenu(parentDiv);
 
						//判断openDiv和parentDiv是否相同
						if (openDiv != parentDiv && !hasClass(openDiv, "collapsed")) {
							//打开菜单以后，应该关闭之前打开的菜单
							//为了可以统一处理动画过渡效果，我们希望在这将addClass改为toggleClass
							//addClass(openDiv , "collapsed");
							//此处toggleClass()不需要有移除的功能
							//toggleClass(openDiv , "collapsed");
							//切换菜单的显示状态
							toggleMenu(openDiv);
						}
 
						//修改openDiv为当前打开的菜单
						openDiv = parentDiv;
					};
				}
 
				/*
				 * 用来切换菜单折叠和显示状态
				 */
				function toggleMenu(obj) {
					//在切换类之前，获取元素的高度
					var begin = obj.offsetHeight;
 
					//切换parentDiv的显示
					toggleClass(obj, "collapsed");
 
					//在切换类之后获取一个高度
					var end = obj.offsetHeight;
 
					//console.log("begin = "+begin +" , end = "+end);
					//动画效果就是将高度从begin向end过渡
					//将元素的高度重置为begin
					obj.style.height = begin + "px";
 
					//执行动画，从bengin向end过渡
					move(obj, "height", end, 10, function() {
						//动画执行完毕，内联样式已经没有存在的意义了，删除之
						obj.style.height = "";
					});
				}
			};
		</script>
	</head>
	<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>
	</body>
</html>

JSON

json链接

木一叶liuyue

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js基础7 增加删除替换类/二级菜单

增加删除替换类<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
复制链接

扫一扫

专栏目录