javascript - 如何为我的站点创建水平滑动子菜单面板？

Question

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

举个例子，我不是在版权保护什么的 - GoDaddy.com导航菜单。

这是我的 - JSFiddle

这个菜单中我想要的东西很少 -

1. 菜单展开时淡出整个页面。

2. 当您点击其他任何地方然后淡出页面上的子菜单时，子菜单面板将自动折叠。

3. 当您再次点击同一个菜单项时，它也会折叠。

4. 它会平滑地向上滑动和向下滑动。

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>

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
    position: absolute;
    width: 100%;
    height: auto;
    margin: 0px;
    padding: 0px;
}
a {
    text-decoration: none;
}
.center {
    margin-right: auto;
    margin-left: auto;
}
#header {
    background-color: #333333;
    position: relative;
    width: 100%;
    height: auto;
    top: 0px;
}
#main-header {
    position: relative;
    width: 1200px;
    height: 115px;
}
#menu {
    position: absolute;
    width: 100%;
    top: 85px;
}
#menu ul {
    margin: 0px;
    padding: 0px;
}
#menu ul li {
    float: left;
    list-style: none;
}
#menu ul li a {
    font-size: 16px;
    color: #FFFFFF;
    display: block;
    clear: both;
    margin-right: 40px;
}
#menu ul li a:hover {
    color: #99FF00;
}
#sub-menu {
    font-size: 24px;
    background-color: #eee;
    position: relative;
    width: 100%;
    height: 300px;
    text-align: center;
    padding-top: 30px;
}
#container {
    background-color: #ff00ff;
    position: relative;
    z-index: -999;
    width: 100%;
    height: 600px;
}
#footer {
    background-color: #333333;
    position: relative;
    width: 100%;
    height: 200px;
}

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，我知道我遗漏了整个脚本但请帮助我。

Answer 1

首先，您从未调用隐藏函数，因此子菜单从未被隐藏。其次，这是我在大约 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);
    });
});

这是一个 fiddle :http://jsfiddle.net/uX4c5/4/