简单的Javascript下拉菜单框

我知道这个问题已被问了几次，但我正在寻找一个更简单的方法。大多数问题都是为了完整的Javascript下拉菜单，但我只是在一个小盒子后面。无处不在，这一直没有得到回答。简单的Javascript下拉菜单框

我正在从购买的教科书中学习Javascript，所以如果有人帮助我，或者如果您更愿意直接给出答案，只需稍微评论一下就可以了，所以我知道最新消息上。我更喜欢使用纯Javascript而不是jQuery，因为我正在从仅使用Javascript的教科书中学习。

我正在创建一个迷你社交网络类页面。在右上角，我有用户名，旁边有一个箭头。我试图制作一个下拉框，点击该箭头时，该下拉框内将是一个'注销'按钮和'设置'按钮。我真的不知道从哪里开始，因为这是我尝试的额外事情。

来源

2013-03-06 Fizzix

为什么重新发明轮子时，Bootstrap给你一个不错的和简单的下拉菜单。你可以自定义并从Bootstrap中选择你想要的，所以你没有无用的CSS和JavaScript。（http://twitter.github.com/bootstrap/components.html#dropdowns） – 2013-03-06 05:04:36

看起来像这个问题之前已经问过：http://stackoverflow.com/questions/7362670/simple-javascript-dropdown-menu – 2013-03-06 05:06:56

@ icanc - 正如我所说，我正在学习Javascript，所以我需要知道如何做这样的事情是简单的Javascript没有图书馆。 – Fizzix 2013-03-06 05:11:27

查找下面的示例代码。我们可以通过多种方式来实现。这对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>

来源

2013-03-06 05:38:37

使>一个链接，然后你获得免费的手，或给它一个指针光标。还有所有的CSS都可以在样式表和所有JS头部，包括onclick - 让我们来教翡翠的最佳做法:) – mplungjan 2013-03-06 05:50:41

@mplungjan - 哈哈，感谢您的指点:) – Fizzix 2013-03-06 05:53:41

@Vijayakumar Chandrasek - 代码是完美的，我需要什么:)非常简单易读。我会给它一个机会，并开始构建它。感谢您的帮助:) – Fizzix 2013-03-06 05:54:39

简单的Javascript下拉菜单框

回答

相关问题