jQuery addClass即使在其他方法处理同一对象时也不起作用
jQuery addClass not working even while other methods work on the same object
左侧显示带有侧导航菜单的web表单的图片
我正在开发您在php中看到的网站，并使用Smarty模板引擎来处理显示。
我遇到了一个非常奇怪的问题，我无法找到解决方案。我正在使用的一个javascript来自MaterializeCSS。这是用于侧面导航菜单，当单击标题（Start、PXE、System）时，该菜单将自动展开和收缩。根据Materialize网站(http://materializecss.com/collapsible.html)为了使其中一个标头自动展开，您只需在上面的Materialize链接上将"active"类添加到该元素中（请参阅"Preselected Section"）。
很简单。我在jQuery中尝试使用addClass方法，但没有成功（下面的代码）。在这里和网上做研究对我没有任何帮助，所以我决定从简单开始，选择一个任意元素来添加一个类，以确保我对addClass方法有正确的理解并正确使用它。
所以我在一个名为expandSideNav.js 的文件中有这个jQuery
$(document).ready(function() {
$(function(){
alert("ExpandSideNav included");
var el = $('h1');
el.css("color", "orange");
el.addClass('active');
})
});
表单中心的"Stock Number"文本是唯一的h1标记，正如您从上图中看到的，文本的颜色实际上变为橙色，但元素从未添加"active"类（请参阅下面IE中View Source中实际呈现的html）。
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="./img/icon/accept.png">
<title>Configurator Tool</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<link href="css/materialize.css" rel="stylesheet" type="text/css"/>
<!-- Custom styles for this template -->
<!-- Jumbotron theme restricts container to 730px max -->
<!--<link href="css/jumbotron-narrow.css" rel="stylesheet"> -->
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="./scripts/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="./scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="./scripts/additional-methods.min.js" type="text/javascript"></script>
<script src="./scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="./scripts/materialize.min.js" type="text/javascript"></script>
<script src="./scripts/index.js" type="text/javascript"></script>
</head>
<body>
<div class="container divcontainer">
<div id="logo">
<img src="./img/Arrow-Logo.png" class="img-responsive center-block" alt="Arrow Logo"/>
<span>®</span>
</div>
<div class="mastercontainer">
<div class ="leftnavbar">
<ul class="nav nav-pills nav-stacked collapsible collapsible-accordion" role="tablist">
<li class="">
<a href="#" class="collapsible-header"><img src="./img/icon/Network Connection Router.ico" height="40" width="40" />Start</a>
<div class="collapsible-body">
<ul>
<li class="">
<a href="index.php?pagetitle=stocknumber.tpl"><img src="./img/arrow_v.png" height="40" width="40" />Stock Number</a>
</li>
<li class="">
<a href="index.php?pagetitle=#"><img src="./img/arrow_v.png" height="40" width="40" />StartPlaceholder1</a>
</li>
<li class="">
<a href="index.php?pagetitle=#"><img src="./img/arrow_v.png" height="40" width="40" />StartPlaceholder2</a>
</li>
</ul>
</div>
</li>
<li class="">
<a href="#" class="collapsible-header"><img src="./img/icon/System.ico" height="40" width="40" />PXE</a>
<div class="collapsible-body">
<ul>
<li class="">
<a href="index.php?pagetitle=timezone.tpl"><img src="./img/arrow_v.png" height="40" width="40" />Time Zone</a>
</li>
<li class="">
<a href="index.php?pagetitle=#"><img src="./img/arrow_v.png" height="40" width="40" />PXEPlaceholder1</a>
</li>
</ul>
</div>
</li>
<li class="">
<a href="#" class="collapsible-header"><img src="./img/icon/PCI-card_network.ico" height="40" width="40" />System</a>
<div class="collapsible-body">
<ul>
</ul>
</div>
</li>
</ul>
</div> <!-- leftnavbar -->
<div class="rightcontent">
<div id="rightcontentnonav">
<div class="welcome-header">
<h1>Stock Number</h1>
<h3>Entry Form</h3>
</div>
<div id="stocknum-content">
<form id="stockNumForm" action="/IniGen_9_21_15/php/verifyStockPlaceholder.php" method="POST">
<label>Stock Number: </label>
<input id="stocknum" name="stocknum" type="text" value="" data-title="placehold"
data-content="placehold" data-placement="bottom"
data-toggle="popover" data-trigger="manual" onkeyup="ValidInputImage()" size="10" maxlength="8"/>
</form>
</div>
<script src="./scripts/stocknum.js" type="text/javascript"></script>
<script src="./scripts/expandSideNav.js" type="text/javascript"></script>
</div> <!-- rightcontentnonav -->
<a href="php/reset.php">Reset</a>
</div> <!-- rightcontent -->
<div id="pager">
<ul class="pager">
<li class="previous disabled">
<a class="disablelink" href="index.php?pagenav=-1"><span aria-hidden="true">←</span> Back</a>
</li>
<li class="next">
<a id="nexLink" href="index.php?pagetitle=">Next <span aria-hidden="true">→</span></a>
</li>
</ul>
</div> <!-- pager -->
</div> <!-- mastercontainer -->
</div> <!-- container -->
<footer></footer>
</body>
</html>
所以我被两件事弄糊涂了。
- 为什么它可以在这个函数中添加css样式，而不能添加addClass，因为它们都在同一个元素和同一个函数中操作？（我试着将jQuery代码放在这里所示的泛型函数中，也放在document.ready中的函数之外）
- 侧导航菜单仍然可以按预期工作，并且可以扩展和收缩。展开时，所包含的materiale.min.js文件会通过在标题中添加"active"类来展开菜单。那么，为什么该文件可以使用此方法添加类，而我的expandSideNav.js却不能
请记住，我的最终目标是能够将"active"类添加到"collapsble header"元素中，但我正在使用我在这里提供的代码从小处入手，并试图找出addClass方法无法按预期工作的原因。
如果需要，可以在上面链接的materialize CSS网站上找到物化.min.js和物化.js。
提前感谢您的帮助！
尝试从所有列表项中删除active类，然后将其添加到元素中。可能是两个项目得到了相同的类。因此，css规则可能会被覆盖
活动类确实是按照您使用的方法添加的。如果其他地方有故障，请核实。
$(document).ready(function() {
$(function(){
var el = $('h1');
el.css("color", "orange");
el.addClass('active');
})
});
.active{
background-color:purple;
}
https://jsfiddle.net/p12mfcvt/
更新
在您提供的链接中，可折叠的头部和可折叠的主体是连续的div元素，采用类似的结构，并且必须工作。或者，默认情况下包括活动类。保持原样。。。
<div class="collapsible-header active"><a href="#"><img src="./img/icon/Network Connection Router.ico" height="40" width="40" />Start</a></div>
<div class="collapsible-body">Whatever you need in body</div>
可能是您正在使用addClass（），它在查看jQuery文档时会将一个类添加到元素中，该元素上已经声明了一个类。以下是jQuery所说的
"需要注意的是，这个方法不会取代类。它只是添加类，并将其附加到任何可能已经分配给元素的元素上。"
https://api.jquery.com/addclass/
您可能希望尝试使用空的class属性或其中的一个伪类来渲染h1元素。如果做不到，你有没有在你的功能中尝试过。。。
el.attr（"类"，"活动"）；
祝你好运。
相关文章：
- JavaScript参数对象不起作用
- Javascript敲除绑定嵌套对象不起作用
- 反应.js - 处于异步数据状态的深层对象不起作用
- 为什么这个对象不起作用
- KnockoutJS - 创建对象不起作用
- Javascript 如果元素不存在返回，则导致对象不起作用
- 通过指令范围传递对象不起作用
- 通过原型扩展数学对象不起作用
- Concat 对象不起作用，或者我需要将值转换为正确的格式
- 使用速记检查未定义的对象不起作用
- 将信息从表单值推送到对象不起作用
- 淘汰:在对象不起作用的情况下进行多选
- 解析函数对Node.js中的promise对象不起作用
- Angularjs指令隔离了对象不起作用的范围+单向数据绑定
- Mongoose - find():搜索选项中的对象不起作用
- 在函数内部生成的对象不起作用，但是传入的对象起作用
- .focus()对克隆对象不起作用
- Ng-click对不透明度为1的对象不起作用
- Javascript对象不起作用
- 将绑定的数据推入对象不起作用
