简单的 Javascript 下拉菜单框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15239300/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simple Javascript drop down menu box
提问by Fizzix
I know this question has been asked a few times, but I'm searching for a more simple approach. Most of the questions are for a full Javascript drop down menu, but I'm just after one small box. Looked everywhere, and this has not been answered.
我知道这个问题已经被问过几次了，但我正在寻找一种更简单的方法。大多数问题都是针对完整的 Javascript 下拉菜单，但我只是在找一个小盒子。到处找，这个没有答案。
I am learning Javascript from a text book I purchased, so I'd prefer it if someone helped me, or if you prefer to just give straight up answers, just a bit of commenting would be appreciated so I know whats going on. I'd prefer to use plain Javascript instead of jQuery since I am learning from a Javascript only text book.
我正在从我购买的一本教科书中学习 Javascript，所以如果有人帮助我，我更喜欢它，或者如果你更喜欢直接给出答案，只是一点评论将不胜感激，所以我知道发生了什么。我更喜欢使用普通的 Javascript 而不是 jQuery，因为我正在从仅 Javascript 的教科书中学习。
I am creating a mini social network kind of page. And at the top right, I have the persons username, with an arrow next to it. I am trying to make a dropdown box, when that arrow is clicked, and inside that dropdown box will be a 'Sign Out' button, and 'Settings' button. I honestly have no idea where to start since this is something extra I am attempting.
我正在创建一个小型社交网络页面。在右上角，我有个人用户名，旁边有一个箭头。我正在尝试创建一个下拉框，当单击该箭头时，该下拉框内将是一个“退出”按钮和“设置”按钮。老实说，我不知道从哪里开始，因为这是我正在尝试的额外内容。
回答by Vijayakumar Chandrasekaran
Find the sample code below. We can do it many ways. This is simple one for JavaScript beginners.
找到下面的示例代码。我们可以通过多种方式做到这一点。这对于 JavaScript 初学者来说很简单。
<html>
<head>
<script language="JavaScript" type="text/javascript">
function showDiv(){
if(document.getElementById('showDiv').style.display == 'none'){
document.getElementById('showDiv').style.display = 'block';
}else{
document.getElementById('showDiv').style.display = 'none';
}
}
</script>
</head>
<body>
<div style="width:auto;; margin:0 auto;">
<div style="position:relative; width:130px; padding:10px; float:left; border:1px solid blue;">
<div style="float:left;">Welcome Friend!</div>
<div style="float:left; margin-left:15px;" onclick="showDiv();">></div>
</div>
<div id="showDiv" style="display:none; float:right; width:150px; height:50px; position:absolute; margin-top:40px; border:1px solid red;">
<div style="float:right;"><input type="submit" value="Settings" /></div>
<div style="clear:both;"></div>
<div style="float:right;"><input type="submit" value="Sign Out" /></div>
</div>
</div>
</body>
</html>
