Question

<div onclick="myFunction();"> Click Me</div>
<div id="nav" style="" class="hide">
    <ul>
        <li>sample</li>
        <li>sample</li>
        <li>sample</li>
    </ul>
</div>

function myFunction (){
    if ("show"){
        document.getElementById('nav').style.display='none';
            } else if ("hide"){
                document.getElementById('nav').style.display='none';
            }
    }

点击我btn，我想显示＆amp;隐藏这个“nav”。使用addclass删除类。

请在这个纯粹的javascript中帮助我。

感谢。

Answer 1

您可以这样做：

myFunction() {
    document.getElementById("nav").classList.toggle("hide");
}

JSFiddle

Answer 2

也许这会更好用吗？

<div id="btn"> Click Me</div>
<div id="nav" style="" class="hide">
    <ul>
        <li>sample</li>
        <li>sample</li>
        <li>sample</li>
    </ul>
</div>

<script>
    var menu = document.getElementById('nav');
    document.getElementById('btn').onclick = function() {
        if (menu.className == "hide"){
            menu.className = "show";
        } else {
            menu.className ='hide';
        }
    }
</script>

<style>
    .show {
        display: inherit;
    }
    .hide {
        display: none;
    }
</style>

Answer 3

存储您的元素，只是为了更整洁的代码。

var myElement = document.getElementById('nav');

使用显示

myElement.style.display = 'none'; // Hide element
myElement.style.display = 'block'; // Show block elements (div, p)
myElement.style.display = 'inline'; // Show inline elements (span, a)

使用可见性：

myElement.style.visibility = 'hidden'; // Hide element
myElement.style.visibility = 'visible'; // Show element

因此使用相同的代码来检查if语句中的样式。

function myFunction ()
{
    if (myElement.style.display == "none")
        myElement.style.display='block';
    else
         myElement.style.display='none';
 }

示例：http://jsfiddle.net/366aofbo/

Javascript简单添加类删除类

3 个答案: