0

我的javascript函数有问题。每当用户单击“szukaj”按钮时，它应该为用户显示一个框。它运行，但仅持续大约 1 秒。

HTML代码

<p id = "paragraph">                                 <!--search box-->
    <input type = "text" name = "serachBar"/>
    <input type = "button" value = "szukaj" name = "search"/>
</p>
<div id = "searchImage">                             <!--search button style-->
    <a href = "" onclick = "popUp('paragraph')" >
        <img src = "images/searchButton.jpg"/>
    </a>
</div>

CSS

#searchImage {
    position:fixed;
    display:block;
    border-radius:6px 0px 0px 6px;
    right:0;
    top:122px;
    height:80px;
    width:25px;
}
#searchImage img{
    border-radius:6px 0px 0px 6px;
    border:1px solid rgba(255,255,255,.3)
}
#searchImage img:hover{
    border:1px solid rgba(255,255,255,.9)
}
#paragraph{
    position:absolute;
    border-bottom:1px solid rgba(255,255,255,0.3);
    border-radius:2px;
    box-shadow:0 1px 2px 2px #1F0000;
    -moz-box-shadow:0 1px 2px 2px #1F0000;
    -webkit-box-shadow:0 1px 2px 2px #1F0000;
    border-top:none;
    background:rgba(0,0,0,0.2);
    width:160px;
    height:80px;
    top:122px;
    right:0;
    display:none;
    font-size:15px;
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    color:white;
}

javascript本身

function popUp(menu){
    var box = document.getElementById(menu);

    if(!box || box.style.display == "block"){
        box.style.display = "none";
    }
    else {
        box.style.display = "block";        
    }       
}
4

2 回答 2

1

在 HTML 中试试这个

<p id = "paragraph">                                 <!--search box-->
  <input type = "text" name = "serachBar"/>
  <input type = "button" value = "szukaj" name = "search"/>
</p>
<div id = "searchImage">                             <!--search button style-->
 <a href = "#" onclick = "popUp('paragraph')" >
  <img src = "images/searchButton.jpg"/>
 </a>
</div>

演示

于 2013-05-01T11:39:39.203 回答
0

标签中的 href<a>是不断发展的，实际上在 html5 中，它不是必需的。

您最好将<a>标签更改为<div>和/或编写更清洁、更合适的 javascript：

<p id = "paragraph"> <!--search box-->
    <input type = "text" name = "serachBar"/>
    <input type = "button" value = "szukaj" name = "search"/>
</p>
<div id = "searchImage"> <!--search button style-->
    <div onclick = "popUp('paragraph')" >
        <img src = "images/searchButton.jpg"/>
    </div>
</div>

function popUp(menu){
    event.preventDefault(); // if using an <a> tag
    var box = document.getElementById(menu);
    if (box) {
        if (box.style.display === "block") {
            box.style.display = "none";
        }
        else {
            box.style.display = "block";        
        }       
    }
}

这是一个更好的小提琴

如果你仍然想使用<a>标签Fiddle

于 2013-05-04T16:38:47.263 回答