Question

我正在尝试创建一个消失的下拉菜单，它会消失在页面顶部，您只能看到“打开”这个词。这将打开菜单，单词open将更改为单词close，单击该按钮会使菜单再次消失。帮助会很多。

<html>
<head>
<title>dropdown</title>
<link rel="stylesheet" type="text/css" href="dropdown_css.css">
<script type = "text/javascript">
    function navagate(menu) {
    var panel = document.getElementById(menu),maxh = "-362px", navg = document.getElementById('navag');
    if (panel.style.marginTop == maxh){
        panel.style.marginTop = "0px";
        navag.innerHTML = "Close";
    }
    else {
        panel.style.marginTop = maxh;
        navag.innerHTML = "Open";
    }
    }
    window.onload = function(){panel.style.marginTop = "-362px";}
</script>

<body>


<div id = "panel">

<ul>

<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>

</ul>


<div id ="sections_button">

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

</div>
</div>
</body>
</body>


</html>


#panel {
    width : 160px;
    height: 130px;
    background-color: gray;
    margin-left: 30px;
    margin-top:20px;


}

#panel li {
    list-style-type: none;
}

Answer 1

在这里，我已经制作了一个可以帮助你的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>

VS

function navagate(menu) {

你可以看到你的功能永远不会被调用。

最后，您打开＆＃39;和'关闭'＆＃39;在这里：

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

在div中你的功能被覆盖了。该功能会将其更改为“关闭”，但无论如何它都不会对用户可见！我把它移到了上面，我希望这是有意义的。

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

Answer 2

您也可以只使用CSS。它是＆＃34; css复选框hack＆＃34;。我不喜欢你想要它，但它非常接近。也应该可以将文本从打开更改为关闭。

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

＆＃13;

*, 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;
}

＆＃13;

<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>

＆＃13;

Answer 3

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

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

使用css hack我无法管理文本更改。有了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>

消失的下拉菜单

3 个答案: