Question

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

我正在从我购买的教科书中学习Javascript，所以如果有人帮助我，我会更喜欢它，或者如果你更愿意直接给出答案，只需要一点评论就可以了，所以我知道最新情况如何。我更喜欢使用普通的Javascript而不是jQuery，因为我正在学习仅限Javascript的教科书。

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

Answer 1

查找下面的示例代码。我们可以做很多事。这对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>

简单的Javascript下拉菜单框

1 个答案: