使用javascript切换菜单_Javascript

使用javascript切换菜单

javascript

使用javascript切换菜单,javascript,Javascript,我需要有一个切换打开听一个点击，然后改变切换框的类名为“打开”。然后让toggle close进行单击，然后将toggle box的类名更改为“close”。这是我已经拥有的代码，但它不起作用，有什么建议吗 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial

我需要有一个切换打开听一个点击，然后改变切换框的类名为“打开”。然后让toggle close进行单击，然后将toggle box的类名更改为“close”。这是我已经拥有的代码，但它不起作用，有什么建议吗

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Drop Down</title>
    <link rel="stylesheet" href="dropdown.css" type="text/css"/>
</head>
<body>

<div id="toggle-box" class="close">
    <div id="toggle-open">Settings</div>
    <div id="toggle-close">Close</div>
    <ul>
        <li>
            <label for="s-1">
                <input id="s-1" type="checkbox" checked>
                <span>Setting One</span>
            </label>
        </li>
        <li>
            <label for="s-2">
                <input id="s-2" type="checkbox" checked>
                <span>Setting Two</span>
            </label>
        </li>
        <li>
            <label for="s-3">
                <input id="s-3" type="checkbox">
                <span>Setting Three</span>
            </label>
        </li>
        <li>
            <label for="s-4">
                <input id="s-4" type="checkbox" checked>
                <span>Setting Four</span>
            </label>
        </li>
        <li>
            <label for="s-5">
                <input id="s-5" type="checkbox">
                <span>Setting Five</span>
            </label>
        </li>
    </ul>
</div>
<p style="margin-top: 100px; text-align: center; font-size: 75%;"><a href="../dropdown.zip">Download the files (dropdown.zip)</a></p>
<script src="dropdown.js"></script>
</body>


下降
设置
接近


设定一


设定二


设定三


第四盘


第五盘

如果可以将javascript库添加到页面（只需再添加一个块），则可以使用以下javascript完成：

$("#toggle-open").click(function() {
  $("#toggle-box").attr("class", "open");
});
$("#toggle-close").click(function() {
  $("#toggle-box").attr("class", "close");
});

没有jquery：

document.getElementById("toggle-open").addEventListener("click", function() {
    document.getElementById("toggle-box").setAttribute("class", "open");
});
document.getElementById("toggle-close").addEventListener("click", function() {
    document.getElementById("toggle-box").setAttribute("class", "close");
});

不需要jQuery

var toggleBox = document.getElementById('toggle-box');

document.getElementById('toggle-open').click = function() {
  toggleBox.className = 'open';
};

document.getElementById('toggle-close').click = function() {
  toggleBox.className = 'close';
};

而不是行：

<script src="dropdown.js"></script>

您可以在代码中编写：（您可以删除带有alert（tooglebox.className）的行；我只是为了测试这些行。）


var settings=document.getElementById（'toggle-open'）；
var close=document.getElementById（'toggle-close'）；
var tooglebox=document.getElementById（'toggle-box'）；
settings.onclick=function（）{
tooglebox.className=“打开”；
警报（tooglebox.className）；
}    
close.onclick=函数（）{
tooglebox.className=“关闭”；
警报（tooglebox.className）；
}

您没有在

中引用

下拉列表.js而不是
中引用的任何原因？不，没有任何原因。我只需要像我解释的那样使用函数就可以了。你能在问题中添加你的javascript，以及任何调试输出吗？在正文底部添加js文件是一个很好的做法好的，你能回答我的问题吗？我不能使用任何jquery，它必须是所有javascript。只要把javascript放在一个。。。这是写进HTML的吗？这是家庭作业吗？这是javascript，因此它必须位于script标记中。
<script>
var settings = document.getElementById('toggle-open');
var close = document.getElementById('toggle-close');
var tooglebox = document.getElementById('toggle-box');

settings.onclick = function(){
    tooglebox.className = "open";
    alert(tooglebox.className);
}    
close.onclick = function(){
    tooglebox.className = "close";
    alert(tooglebox.className);
}
</script>