在 Javascript 中添加和删除类

Question

我试图让它工作，但无法弄清楚。已经搜索过主题，但要么我不理解它们，要么没有被问到。可能两者兼而有之！ :P

我只是尝试弹出包装，当您单击 "clickme" 时，如果它弹出，它应该保留并只显示其他内容。如果 "clickme" 中的一个被点击两次，它应该关闭...

HTML

<a id="nav1">Clickme</a>
<a id="nav2">Clickme</a>
<div id="navwrapper">
    <h1 id="dropdown1">Menu1</h1>
    <h1 id="dropdown2">Menu2</h1>
</div>

Javascript

document.getElementById("nav1").onclick=function(){
    var dropdown1 = document.getElementById('dropdown1');
    var dropdown2 = document.getElementById('dropdown2');
    var navwrapper = document.getElementById('navwrapper');
    if (dropdown1('not(.selected)') && navwrapper('not(.selected)')) {
        dropdown1.addClass('unselected');
        navwrapper.addClass('unselected');
    }else{
        dropdown1.addClass('selected');
        navwrapper.addClass('selected');
        dropdown2.addClass('unselected');
    }
};
document.getElementById("nav2").onclick=function(){
    var dropdown1 = document.getElementById('dropdown1');
    var dropdown2 = document.getElementById('dropdown2');
    var navwrapper = document.getElementById('navwrapper');
    if (dropdown2('not(.selected)') && navwrapper('not(.selected)')) {
        dropdown2.addClass('unselected');
        navwrapper.addClass('unselected');
    }else{
        dropdown2.addClass('selected');
        navwrapper.addClass('selected');
        dropdown1.addClass('unselected');
    }
};

CSS

#navwrapper.selected {
    display:block;
}
#navwrapper.unselected {
    display:none;
}
#navwrapper {
    background-color:#ff0000;
    transition: all 500ms ease;
}
#dropdown1, #dropdown2 {
    transition: all 500ms ease;
}
#dropdown1.selected, #dropdown2.selected {
    display:block;
}
#dropdown1.unselected, #dropdown2.unselected {
    display:none;
}

Answer 1

您可以使用 HTMLElement 的标准 className 属性更改任何元素的 class 名称。然而，这个 gets/sets 完整的 class 名称，引号之间的所有内容。例子

<a id="one" class="hello world">

JavaScript:

var one = document.getElementById('one');
one.className = 'new world';

现在 HTML 看起来像：

<a id="one" class="hello world">

要在元素上添加或删除个 class 元素，您可以使用 classList 界面。

one.classList.remove('hello');
one.classList.add('new');

参考：https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

请注意 classList 并未得到普遍支持。如果你需要支持 Internet Explorer 9-，这就不行了。在这种情况下，您将需要创建自己的 addClass 和 removeClass 函数，或者使用提供它们的库，例如 jQuery。

function addClass(el, name) {
    var regexp = new RegExp('(^| )' + name + '( |$)');
    if (!regexp.test(el.className)) {
        el.className += ' ' + name;
    }
    el.className = el.className.trim();
};

function removeClass(el, name) {
    var regexp = new RegExp('(^| )' + name + '( |$)');
    el.className = el.className.replace(regexp, '');
    el.className = el.className.trim();
};

用法：

removeClass(one, 'hello');
addClass(one, 'new');

一般来说，将 jQuery 的 API 与本地 JavaScript/ECMAScript API 混合使用时要小心。这就是您的原始代码中发生的事情。您正在将 jQuery 方法应用于标准 JS HTMLElement 实例。这是很多混乱的根源！

Answer 2

这就是您希望它的工作方式吗？如果是，我只是将脚本更改为仅使用 jQuery。 JSFiddle

试试这个代码：

Javascript:

$( "#nav1" ).click(function() {
    var dropdown1 = $("#dropdown1");
    var dropdown2 = $("#dropdown2");
    var navwrapper = $("#navwrapper");
    if (dropdown1.hasClass( "selected" ) && navwrapper.hasClass( "selected" )) {
        dropdown1.removeClass('selected');
        dropdown1.addClass('unselected');
        navwrapper.removeClass('selected');
        navwrapper.addClass('unselected');
    }else{
        dropdown1.removeClass('unselected');
        dropdown1.addClass('selected');
        navwrapper.removeClass('unselected');
        navwrapper.addClass('selected');
        dropdown2.removeClass('selected');
        dropdown2.addClass('unselected');
    }
});
$( "#nav2" ).click(function() {
    var dropdown1 = $("#dropdown1");
    var dropdown2 = $("#dropdown2");
    var navwrapper = $("#navwrapper");
    if (dropdown2.hasClass( "selected" ) && navwrapper.hasClass( "selected" )) {
        dropdown2.removeClass('selected');
        dropdown2.addClass('unselected');
        navwrapper.removeClass('selected');
        navwrapper.addClass('unselected');
    }else{
        dropdown2.removeClass('unselected');
        dropdown2.addClass('selected');
        navwrapper.removeClass('unselected');
        navwrapper.addClass('selected');
        dropdown1.removeClass('selected');
        dropdown1.addClass('unselected');
    }
});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<a id="nav1">Clickme</a>
<a id="nav2">Clickme</a>
<div id="navwrapper" class="selected">
<h1 id="dropdown1" class="selected">Menu1</h1>
<h1 id="dropdown2" class="unselected">Menu2</h1>
</div>

Answer 3

我不是 100% 确定你想要完成什么，但我猜你想要 2 个带有选项的下拉菜单？

我的建议是使用 Bootstrap (http://getbootstrap.com/) 这是一个很棒的工具，它使用 Javascript 和 Jquery 来完成这个，更像是响应式网站和应用程序、更快的反应和 searchable/sortable 个表格。

这个 jsfiddle 是：

https://jsfiddle.net/wh64mLhu/

分解它：

步骤 1

像这样在 header 中添加 Bootstrap CSS :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

步骤 2

像这样在 body 的底部添加 Javascript

<html>
      <head>
           <!-- Header Code + CSS Here -->
      </head>
     <body>
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
           <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
     </body>
</html>

步骤 3

创建 HTML body 任何你想要的代码，例如我上面分享的 JSFiddle。这包含 2 个下拉列表。

首先您创建一个 <div> 以表明您将在您的页面中创建一个新的 "division"。如果您想要使用 <span> 的图像，则可以添加 <Button>。完成此操作后，您使用 <ul> 创建列表，并在列表中包含所有元素 <li>.

我希望这对您有所帮助并说服您使用 Bootstrap :)

在 Javascript 中添加和删除类

Adding and removing classes in Javascript

javascript

jquery

html

css

addclass

在 Javascript 中添加和删除 类

Adding and removing classes in Javascript

javascript

jquery

html

css

addclass

在 Javascript 中添加和删除类