Question

我有一个小的javascript函数和一段html代码，我有一个按钮，我希望每当用户徘徊那个按钮时，会出现一个小框。尽管我的函数执行了，但似乎工作得很好只有在我将该按钮悬停2次之后（在页面刚刚加载之后我尝试使用我的功能一次，之后所有内容都在第一次悬停后执行）。那么我该怎么办呢？ 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>

Answer 1

像这样更改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条件。如果找不到，则根本不想设置属性。

Answer 2

<p>是一个流元素，不能包含<input>s。

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

您可能希望定义mouseover和mouseout事件侦听器。

Javascript函数仅在第二次悬停后执行

2 个答案: