Javascript 如何为我的网站创建水平滑动子菜单面板？

我想为我的网站创建一个水平滑动子菜单。当您单击菜单项2时，子菜单面板会显示/隐藏滑动功能或类似功能

举个例子，它不像我是版权或其他什么-导航菜单

这是我的-

这菜单上没有我想要的东西-

当菜单展开时，整个页面淡出

当您单击“淡出”页面上的任何其他子菜单时，子菜单面板将自动折叠

当您再次单击同一菜单项时，它也会崩溃

它将平稳地上下滑动

HTML

<div id="header">
    <div id="main-header" class="center">
        <div id="menu">
            <ul>
                <li><a href="#">Menu Item 1</a>
                </li>
                <li><a href="#" id="button" onclick="showhide()">Menu Item 2</a>
                </li>
                <li><a href="#">Menu Item 3</a>
                </li>
                <li><a href="#">Menu Item 4</a>
                </li>
                <li><a href="#">Menu Item 5</a>
                </li>
                <li><a href="#">Menu Item 6</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div id="sub-menu"><a href="#">Sub Menu Panel</a>
</div>
<div id="container"></div>
<div id="footer"></div>

JavaScript

function showhide() {
    var div = document.getElementById("sub-menu");
    if (div.style.display !== "none") {
        div.style.display = "none";
    } else {
        div.style.display = "block";
    }
}

---

请帮助我使用JavaScript或jQuery，我知道我缺少整个脚本，但请帮助我。

首先，您从未调用过隐藏函数，因此子菜单从未隐藏。其次，这里是我在大约2分钟内使用jQuery生成的一个示例，以实现您的想法。以下是JS/jQuery：

function showhide(){
    var div = document.getElementById("sub-menu");
    if (div.style.display != "none") {
        div.style.display = "none";
    } else {
        div.style.display = "block";
    }
 }
// Calling the function
showhide();

$(document).ready(function(){
    $('#menu li:nth-child(2)').click(function(){
        $('#sub-menu').slideToggle(300);
    });
    $('a.close').click(function(){
        $('#sub-menu').slideUp(300);
    });
});

---

这里有一个小把戏：

要开始，请看看如何使用

不透明度

和

持续时间

。您可以使用转换、显示和定位应用不同的样式，然后使用JavaScript在类之间切换。这是我无法适应所有工作的主要问题！就像一般的旁注一样，说

我不想把jQuery弄糟是没有意义的。我并不是说使用jQuery。我只是简单地指出，使用jQuery，与使用JavaScript相比，您可以在更短的时间内完成这项工作，所需的JavaScript知识也更少，而且它的设计将与跨浏览器兼容。（忽略CSS3解决方案）。无论如何，我完全支持使用JavaScript和CSS，所以不要误解我：）谢谢你的建议：）好吧！谢谢你的帮助。但这不是我想要的。。。当我再次单击
菜单项2
不在
子菜单面板（单击以关闭）
时，我希望它通过单击
来工作。你能更新一下吗…我意识到在我发布后，我编辑了答案来反映这一点。我也把新的小提琴贴在那里了，但这里还有一把你要的褪色的小提琴：
function showhide(){
    var div = document.getElementById("sub-menu");
    if (div.style.display != "none") {
        div.style.display = "none";
    } else {
        div.style.display = "block";
    }
 }
// Calling the function
showhide();

$(document).ready(function(){
    $('#menu li:nth-child(2)').click(function(){
        $('#sub-menu').slideToggle(300);
    });
    $('a.close').click(function(){
        $('#sub-menu').slideUp(300);
    });
});