码迷,mamicode.com
首页 > Web开发 > 详细

使用jquery对css格式修改与通过css直接修改的异同

时间:2018-09-20 23:53:49      阅读:416      评论:0      收藏:0      [点我收藏+]

标签:扫描   enter   rem   src   doc   none   使用   3.3   ESS   

如下是一段简单的左侧菜单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直接修改的异同

标签:扫描   enter   rem   src   doc   none   使用   3.3   ESS   

原文地址:https://www.cnblogs.com/rookieboy/p/9684007.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!