4

我知道这个问题已被问过几次，但我正在寻找一种更简单的方法。大多数问题都是针对完整的 Javascript 下拉菜单，但我只是在一个小盒子之后。到处找了找，还是没有答案。

我正在从我购买的一本教科书中学习 Javascript，所以如果有人帮助我，或者如果你更愿意直接给出答案，我会更喜欢它，只要稍微评论一下，我就会知道发生了什么。我更喜欢使用纯 Javascript 而不是 jQuery，因为我正在从仅 Javascript 的教科书中学习。

我正在创建一个迷你社交网络类型的页面。在右上角，我有个人用户名，旁边有一个箭头。我正在尝试制作一个下拉框，当单击该箭头时，在该下拉框中将有一个“退出”按钮和“设置”按钮。老实说，我不知道从哪里开始，因为这是我正在尝试的额外内容。

4

1 回答 1

7

找到下面的示例代码。我们可以通过多种方式做到这一点。这对于 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-06T05:38:37.400 回答