消失的下拉菜单

在这里，我做了一个JS小提琴，可能会帮助你：http://jsfiddle.net/942z0nhh/我根本没有玩弄样式。

我注意到的几件事：

你犯了一些错误，我认为如果你正确缩进，你不会犯这些错误。 看看这里，你两次关闭身体的地方：

<a onclick = "navigate ('panel')" id = "navag">Open</a>
</div>
</div>
</body>
</body>

其次，你有一些拼写错误：

<a onclick = "navigate ('panel')" id = "navag">Open</a>

与

function navagate(menu) {

您可以在那里看到，您的函数永远不会因此而被调用。

最后，您的"打开"和"关闭"在这里：

<a onclick = "navigate ('panel')" id = "navag">Open</a>

在您的函数覆盖的div 中。 该函数会将其更改为"关闭" - 但无论如何它对用户都是不可见的！ 我把它移到上面，我希望这是有意义的。

如果您有任何其他问题，或者我误解了，请告诉我。

你也可以只用CSS来做。这是"css复选框黑客"。我有它不像你想要的那样，但它非常接近。将文本从打开更改为关闭也应该是可能的。

目前，我不知道如何将打开/关闭标签移动到ul列表下方。

*, html {
    padding: 0px;
    font-family: sans-serif;
}
/* Checkbox Hack */
input[type=checkbox] {
   position: absolute;
   display: none;
}
label { 
  display: block;
  cursor: pointer;
  content: "close";
}
/* Default State */
#wrapper {
   display: block;
   background: gray;
   color: white;
   text-align: center;
}
/* Toggled State */
input[type=checkbox]:checked ~ #menu {
   display: block;
   background: lightgray;
   color: black;
   top:0px;
}
.menuToggle ul{
    display: none;
    width: 100%;
}
#menu {
    padding-top: 5px;
    margin: 0px;
    list-style: none;
}

<div id="wrapper">
    <div class="menuToggle">
        <label for="toggle-1">open</label>
        <input type="checkbox" id="toggle-1"/>
        <ul id="menu">
            <li>CIT</li>
            <li>Blackboard</li>
            <li>Mcomms</li>
            <li>Tables</li>
            <li>Exams</li>
        </ul>
    </div>
</div>

使用 jQuery，你可以像下面的例子一样做。

我认为现在几乎就像你想要的那样。也许需要一些样式改进。

使用css黑客，我无法管理文本更改。使用js，您有更多的可能性。您还可以改进/修改动画。

$(function() {
    var $menuButton = $('#openButton');
    var $menu = $('#menu');
    
    var btnToggleAnim = function() { 
        $menuButton.animate({opacity: 'toggle'}, "fast");
    };
    
    var menuToggleAnim = function() { 
        $('#menu').animate({
            height:'toggle', 
            //opacity: 'toggle'
        },  { duration: "slow" });
    };
    
    $('#closeButton,#openButton').on('click', function() {
           menuToggleAnim();
           btnToggleAnim();
    });
});

*, html {
    padding: 0px;
    font-family: sans-serif;
}
a {
    text-decoration:none;
}
#openButton {
    display:block;
    background: gray;
    color: #fff;
    text-decoration: none;
    border: 2px solid lightgray;
    border-radius: 15px;
}
#closeButton{
   display: block;
   background: gray;
   color: #fff;
   text-align: center;
   border: 2px solid lightgray;
   border-bottom-left-radius: 13px;
   border-bottom-right-radius: 13px;
}
#wrapper {
   display: block;
   text-align: center;
}
#menu {
    display: none;
    background: lightgray;
    color: black;
    padding-top: 5px;
    margin: 0px;
    list-style: none;
}
#menu {
    color: #000;
    text-decoration: none;
    border: 2px solid lightgray;
    border-radius: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    <a href="#" id="openButton">open</a>
    <ul id="menu">
        <li><a href="#1">CIT</a></li>
        <li><a href="#2">Blackboard</a></li>
        <li><a href="#3">Mcomms</a></li>
        <li><a href="#4">Tables</a></li>
        <li><a href="#5">Exams</a></li>
        <li><a href="#" id="closeButton">close</a></li>
    </ul>
</div>