Question

我试图让它工作，但无法弄明白。已经搜索过的主题，但要么我不理解它们，要么没有被问到。可能两个！：P

我只是尝试将包装器弹出，当您点击＆＃34; clickme＆＃34;＆如果它被弹出，它应该保持并且只显示其他内容。如果其中一个点击次数被点击两次就会关闭...

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

您可以使用className的标准HTMLElement属性更改任何元素的类名。但是，这会获取/设置完整的类名，引号之间的所有内容。实施例

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

JavaScript的：

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

现在HTML看起来像：

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

要在元素上添加或删除单个类，您可以使用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, '$1');
    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来实现这一点，更像是转发网站和应用程序，更快的反应和可搜索/可排序的表。

这个jsfiddle是：

https://jsfiddle.net/wh64mLhu/

将其分解：

第1步

在标题中添加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步

在身体底部添加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身体代码，无论你想拥有什么，例如我上面分享的JSFiddle。这包含2个下拉列表。

首先创建<div>以明确您将在页面中创建新的“部门”。如果您想使用<Button>创建图像，请添加<span>。完成此操作后，您可以使用<ul>创建列表，并在其中创建所有元素<li>。

我希望这有助于并说服你使用Bootstrap：）

在Javascript中添加和删除类

3 个答案: