使用jquery對css格式修改與通過css直接修改的異同
阿新 • • 發佈：2018-09-21
左側菜單 width 生效 spl 修改 sel UNC 隱藏 none
如下是一段簡單的左側菜單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>
事實證明方法二不生效，方法一生效。
不得甚解，書之待續。
使用jquery對css格式修改與通過css直接修改的異同