[英]Javascript function doesn't run properly and displays a box for only 1 second
I have got a problem with my javascript function. 我的javascript函数有问题。 It is supposed to display a box for a user whenever he clicks on the "szukaj" button. 应该在用户单击“ szukaj”按钮时为用户显示一个框。 It runs, but only for roughly 1 second. 它运行,但仅持续约1秒钟。
HTML code 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 的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 itself JavaScript本身
function popUp(menu){
var box = document.getElementById(menu);
if(!box || box.style.display == "block"){
box.style.display = "none";
}
else {
box.style.display = "block";
}
}
Try this in HTML 在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>
The href in an <a>
tag is evolving, and in fact in html5, is not required. <a>
标记中的href不断发展,实际上不需要html5中的href。
You are better off changing your <a>
tag to a <div>
and/or writing cleaner and more appropriate javascript: 最好将<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";
}
}
}
Here is a better Fiddle 这是一个更好的小提琴
And if you still want to use the <a>
tag Fiddle 如果您仍然想使用<a>
标签Fiddle
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.