如下是一段简单的左侧菜单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