javascript - 在JavaScript中添加和删除类

我试图使其正常运行，但无法解决。
已经搜索过主题，但是我听不懂主题或没有被询问。可能两者都有！ ：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>

Java脚本

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

最佳答案

这就是您想要的方式吗？如果是，我只是将脚本更改为仅使用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>