Question

我使用的是ddsmoothmenu，它的构造方式可以通过插件动态地将类名添加到父菜单容器中，一旦将类应用于父容器，所有css也将应用在菜单上。以下是ddsmoothmenu传递classname的方法：

<div id="myMenu">
  <ul>
     <li>.....</li>
  </ul>
</div>

菜单的呈现由以下内容完成，其中'classname'通过插件传递，动态添加到菜单容器中。

ddsmoothmenu.init({
    mainmenuid: 'myMenu',
    orientation: 'h',
    classname: 'ddsmoothmenu',
    contentsource: 'markup'
});

到目前为止一切顺利。但是我需要在菜单容器中添加一个'noindex'类。我认为很容易我只是添加标记，但问题是插件替换了我的类并添加了从上面的'classname'参数提供的任何内容。

在插件本身：这行代码是罪魁祸首：

$mainmenu.parent().get(0).className = setting.classname || "ddsmoothmenu"

其中$mainmenu基本上是无序列表。

我知道我可以做一个简单的+ =来连接类名。但我不确定上面是否有可能，因为它有ternary if..else setup

我可以$mainmenu.parent().get(0).className += setting.classname || "ddsmoothmenu"

我想要类似于上面一行的内容，以便我在标记中硬编码的类保持不变，而插件添加的类只是附加到我在标记中直接添加的类中？

Answer 1

您所要做的就是获取当前的类名，为其添加空格，然后添加第二个类名。我知道你想使用一个库，但普通的Javascript可以很容易地做到这一点：

function addclass(name,id) {
    var element = document.getElementById(id); //not sure how you want to obtain your element
    var currentclass = element.className;
    element.className = currentclass + " " + name;
}

同样，不确定如何选择文档对象，但只要在类名之间添加空格，一切都应该是好的。

Answer 2

以下是关于addclass函数的jquery api doc的描述：

描述：将指定的类添加到每组中   匹配的元素。

版本添加：1.0.addClass（className）className类型：String一个或   更多以空格分隔的类要添加到的class属性   每个匹配的元素。

版本添加：1.4.addClass（函数）函数   类型：Function（Integer index，String currentClassName）=＆gt;字符串A.   函数返回一个或多个要添加的空格分隔的类名   到现有的班级名称。收到的指数位置   集合中的元素和作为参数的现有类名称。内   函数，这是指集合中的当前元素。

下面是使用jquery的addclass函数的示例，似乎正是您要求的。

$( "p" ).last().addClass( "selected" );

（忘记我不能发布HTML）

基本上它只是将指定的类添加到所选元素而不删除任何其他类。

Here是api doc

的链接

Answer 3

我喜欢使用classie。它提供了一种向DOM添加或删除类的稳定方法。好消息是，它为没有classList功能的浏览器提供了后备功能（例如IE8）。

如果您只是在寻找代码段：

addClass = function( elem, c ) {
    elem.classList.add( c );
};

和

addClass = function( elem, c ) {
    elem.className = elem.className + ' ' + c;
};

使用javascript添加（不替换）css类

3 个答案: