0

私は小さなJavaScript関数とボタンのあるHTMLコードを持っています.ユーザーがそのボタンをホバーするたびに小さなボックスが表示されるようにしたい.そのボタンを2回ホバーします（ページが読み込まれた直後に関数を1回使用しようとした後、最初のホバー後にすべてが実行されます）。HTMLコード

<body>
<div id = "searchBox">
    <p id = "paragraph"><input type = "text" name = "serachBar"/>
    <input type = "button" value = "szukaj" name = "search"/>
    </p>
    <div id = "searchButton"><a href = "#" onmouseover="popUp('paragraph')">Szukaj</a></div>
</div>
</body>

そしてjavascript自体

<script type = "text/javascript">
function popUp(menu){
    var searchBox = document.getElementById(menu).style;
    var searcButton = document.getElementById('searchButton');
    if(!searchBox || searchBox.display == "none"){
        searchBox.display = "block";
        }
    else {
        searchBox.display = "none";
    }
};
</script>
4

2 に答える 2

2

if次のようにステートメントを変更します。

function popUp(menu) {
    var searchBox = document.getElementById(menu);
    var searcButton = document.getElementById('searchButton');
    if (searchBox) {
        if(searchBox.style.display == ""){
            searchBox.style.display = "block";
        }
        else {
            searchBox.style.display = "";
        }
    }
};

元の値は の""代わりになり"none"ます。

CSS 設定が にあると仮定していdisplay:"none"ます。

状態も移動しましたsearchBox。見つからない場合は、プロパティをまったく設定する必要はありません。

于 2013-04-28T21:44:26.893 に答える
1

<p>はフロー要素であり、を含めることはできません<input>s。

さらに、関数は、マウスオーバーでボックスを表示するのではなく、非表示の状態を切り替えるように指示します。したがって、ボックスは最初のホバーで非表示になり、2 番目のホバーで再び表示されます。

mouseoverおそらく、リスナーを定義してmouseoutイベントしたいと思うでしょう。

于 2013-04-28T21:57:52.513 に答える