如下是一段简单的左侧菜单html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"><title>Title</title><script src="jquery-3.3.1.min.js"></script><style> .hide{display=none} //方法一:通过css隐藏子菜单明细</head>
<body><div class="menu "> <div class="enter"> <div class="menu_son" onclick="appear(this)">入库扫描</div> <div class="con hide"> <div>开始</div> <div>操作</div> <div >结束</div> </div> </div> <div class="process"> <div class="menu_son" onclick="appear(this)">合箱操作</div> <div class="con hide"> <div>开始</div> <div>操作</div> <div >结束</div> </div> </div> <div class="out"> <div class="menu_son" onclick="appear(this)">出库扫描</div> <div class="con hide"> <div>开始</div> <div>操作</div> <div >结束</div> </div> </div></div><div class="content "></div><script> $(".menu").css({"height":"700px","width":"300px","background-color":"lightblue","float":"left"}) $(".content").css({"height":"700px","width":"700px","background-color":"blue","float":"left"}) $(".hide").css("display","none")//方法二:通过jquery隐藏子菜单明细 function appear(self) { $(self).next().removeClass("hide"); }</script></body></html>事实证明方法二不生效,方法一生效。不得甚解,书之待续。
原文地址:https://www.cnblogs.com/rookieboy/p/9684007.html
时间: 2024-08-30 07:45:59