javascript - 使用 javascript 添加(而不是替换)css 类

Question

我使用的是ddsmoothmenu，它的构造方式是可以通过插件动态添加一个类名到父菜单容器，一旦类被应用到父容器，所有的css也会应用在菜单上。 以下是 ddsmoothmenu 传递类名的方式:

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

菜单的呈现由以下代码完成，其中“类名”通过插件传递以动态添加到菜单容器中。

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

到目前为止一切顺利。但我需要向菜单容器添加一个“noindex”类。我认为简单地添加标记很简单，但问题是插件替换了我的类并添加了上面“类名”参数提供的任何内容。

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

$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;
}

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