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.

此外，您的函数指示切换隐藏状态，而不是在鼠标悬停时显示框。因此，该框将在第一次悬停时隐藏，并在第二次悬停时重新出现。

您可能想要定义事件侦听mouseover器。mouseout

于 2013-04-28T21:57:52.513 回答