Javascript 消失下拉菜单_Javascript_Html_Css_List_Drop Down Menu

Javascript 消失下拉菜单

javascript html css list drop-down-menu

Javascript 消失下拉菜单,javascript,html,css,list,drop-down-menu,Javascript,Html,Css,List,Drop Down Menu,我试图创建一个消失的下拉菜单，它消失在页面的顶部，你只能看到“打开”这个词。这将打开菜单，打开一词变为关闭一词，单击该词会使菜单再次消失。我会非常感激你的帮助 <html> <head> <title>dropdown</title> <link rel="stylesheet" type="text/css" href="dropdown_css.css"> <script type = "text/javascript">

我试图创建一个消失的下拉菜单，它消失在页面的顶部，你只能看到“打开”这个词。这将打开菜单，打开一词变为关闭一词，单击该词会使菜单再次消失。我会非常感激你的帮助

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


下拉列表
功能导航（菜单）{
var panel=document.getElementById（菜单），maxh=“-362px”，navg=document.getElementById（'navag'）；
if（panel.style.marginTop==maxh）{
panel.style.marginTop=“0px”；
navag.innerHTML=“关闭”；
}
否则{
panel.style.marginTop=maxh；
navag.innerHTML=“打开”；
}
}
window.onload=function（）{panel.style.marginTop=“-362px”；}

CIT
黑板
Mcomms
桌子
考试

打开
#面板{
宽度：160px；
高度：130像素；
背景颜色：灰色；
左边距：30px；
边缘顶部：20px；
}
#李小组{
列表样式类型：无；
}

在这里，我做了一个JS提琴，它可能会帮助您：我根本没有玩弄样式

我注意到了几件事：

你犯了一些错误，我想如果你缩进得当，你是不会犯的。看看这里，你两次闭上你的身体：

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

你可以看到，你的函数永远不会被调用，因为它

最后，您的“打开”和“关闭”a在此处：

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

打开

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

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

您也可以只使用CSS。这是“css复选框黑客”。我不是你想要的，但离你很近。也可以将文本从打开更改为关闭

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

*，html{
填充：0px；
字体系列：无衬线；
}
/*复选框黑客*/
输入[类型=复选框]{
位置：绝对位置；
显示：无；
}
标签{
显示：块；
光标：指针；
内容：“关闭”；
}
/*默认状态*/
#包装纸{
显示：块；
背景：灰色；
颜色：白色；
文本对齐：居中；
}
/*切换状态*/
输入[类型=复选框]：选中~#菜单{
显示：块；
背景：浅灰色；
颜色：黑色；
顶部：0px；
}
menuToggle ul{
显示：无；
宽度：100%；
}
#菜单{
垫面：5px；
边际：0px；
列表样式：无；
}


打开

CIT
黑板
Mcomms
桌子
考试

使用jQuery，您可以像下面的示例那样进行操作

我想现在差不多是你想要的了。可能需要一些造型上的改进

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

$（函数（）{
var$menuButton=$（“#openButton”）；
var$menu=$（“#menu”）；
var btntogleanim=函数（）{
$menuButton.animate（{opacity:'toggle'}，“fast”）；
};
var menutogleanim=函数（）{
$（“#菜单”）。设置动画({
高度：'切换'，
//不透明度：“切换”
}，{持续时间：“慢”}）；
};
$（“#关闭按钮，#打开按钮”）。在（'click'，function（）上{
menuToggleAnim（）；
btnToggleAnim（）；
});
});
*，html{
填充：0px；
字体系列：无衬线；
}
a{
文字装饰：无；
}
#打开按钮{
显示：块；
背景：灰色；
颜色：#fff；
文字装饰：无；
边框：2倍纯色浅灰色；
边界半径：15px；
}
#关闭按钮{
显示：块；
背景：灰色；
颜色：#fff；
文本对齐：居中；
边框：2倍纯色浅灰色；
边框左下半径：13px；
边框右下半径：13px；
}
#包装纸{
显示：块；
文本对齐：居中；
}
#菜单{
显示：无；
背景：浅灰色；
颜色：黑色；
垫面：5px；
边际：0px；
列表样式：无；
}
#菜单{
颜色：#000；
文字装饰：无；
边框：2倍纯色浅灰色；
边界半径：15px；
}









创建一个JS提琴，人们可以帮助更简单的完美！非常感谢，只需要将代码从打开更改为关闭，我就可以排序了。非常感谢。非常感谢你的帮助！
function navagate(menu) {

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