4

この質問が何度か聞かれたことは知っていますが、もっと簡単なアプローチを探しています。ほとんどの質問は完全なJavascriptドロップダウンメニューに関するものですが、私は1つの小さなボックスの直後にいます。どこを見ても、これは答えられていません。

私は購入した教科書から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 に答える