javascript - 即使其他方法在同一个对象上工作，jQuery addClass 也不起作用

Picture of my web form with side navigation menu shown on left

我正在用 php 开发您在上面看到的网站，并使用 Smarty 模板引擎来处理显示。

我有一个非常奇怪的问题，我无法找出解决方案。我正在使用的 javascripts 之一来自 Materialize CSS。这是侧边导航菜单，单击标题(开始、PXE、系统)时会自动展开和收缩。根据 Materialise 网站 (http://materializecss.com/collapsible.html)，为了自动扩展其中一个标题，您只需在上面的 Materialise 链接上向该元素添加“事件”类(请参阅“预选部分”)。

很简单。我在 jQuery 中使用 addClass 方法尝试了这个，但没有成功(代码如下)。在这里和网络上做研究让我无处可去，所以我决定从简单开始，选择一个任意元素来添加一个类，以确保我对 addClass 方法有正确的理解并正确使用它。

所以我在一个名为 expandSideNav.js 的文件中有这个 jQuery

$(document).ready(function() {   

    $(function(){
        alert("ExpandSideNav included");

        var el = $('h1');

        el.css("color", "orange");

        el.addClass('active');
    })
});

表单中心的“股票编号”文本是唯一的 h1 标签，正如您从上图中所见，文本的颜色实际上变为橙色，但是该元素从未获得“事件"添加到其中的类(请参阅下面在 IE 中查看源代码中实际呈现的 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>&reg;</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">&larr;</span> Back</a>
                    </li>
                    <li class="next">
                        <a id="nexLink" href="index.php?pagetitle=">Next <span aria-hidden="true">&rarr;</span></a>
                    </li>
                </ul>
            </div> <!-- pager -->
        </div> <!-- mastercontainer -->
    </div> <!-- container -->
    <footer></footer>
</body>
</html>

所以我对两件事感到困惑。

为什么它能够在此函数中添加 css 样式而不是 addClass，当它们都在同一个元素和同一个函数中操作时？ (我已经尝试将该 jQuery 代码放置在通用函数内部，如此处所示，以及放置在 document.ready 中的函数外部)
侧边导航菜单仍按预期工作，并且能够展开和收缩。扩展时，包含的 materialize.min.js 文件通过将“active”类添加到标题来扩展菜单。那么，为什么该文件能够使用此方法添加类，而我的 expandSideNav.js 却不能？

请记住我的最终目标是能够将“active”类添加到“collapsible-header”元素，但是我正在使用我在此处提供的代码从小处着手并尝试找出为什么使用 addClass 方法没有按预期工作。

如果需要，可以在上面链接的 Materialise CSS 网站上找到 materialize.min.js 和 materialize.js。

在此先感谢您的帮助!

最佳答案

尝试从所有列表项中删除 active 类，然后将其添加到您的元素中。可能是两个元素正在上同一个类。因此，CSS 规则可能会被覆盖

关于javascript - 即使其他方法在同一个对象上工作，jQuery addClass 也不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33377172/

javascript - 即使其他方法在同一个对象上工作，jQuery addClass 也不起作用

上一篇：css - 忽略 div 内的填充 div - CSS

下一篇：css - 页面布局滚出屏幕