Below is my javascript code which i used to show a div
when clicked on a button
.
下面是我的javascript代码,我用它来显示单击按钮时的div。
How can I hide it when clicked again? And then on clicking it, div
should be visible again?
再次点击时如何隐藏它?然后单击它,div应该再次可见?
<script type="text/javascript">
var _hidediv = null;
function showdiv(id) {
if(_hidediv)
_hidediv();
var div = document.getElementById(id);
div.style.display = 'block';
_hidediv = function () { div.style.display = 'none'; };
}
</script>
5 个解决方案
#1
24
In case you are interested in a jQuery soluton:
如果您对jQuery soluton感兴趣:
This is the HTML
这是HTML
<a id="button" href="#">Show/Hide</a>
<div id="item">Item</div>
This is the jQuery script
这是jQuery脚本
$( "#button" ).click(function() {
$( "#item" ).toggle();
});
You can see it working here:
你可以看到它在这里工作:
http://jsfiddle.net/BQUyT/
If you don't know how to use jQuery, you have to use this line to load the library:
如果您不知道如何使用jQuery,则必须使用此行来加载库:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
And then use this line to start:
然后使用此行开始:
<script>
$(function() {
// code to fire once the library finishes downloading.
});
</script>
So for this case the final code would be this:
所以对于这种情况,最终的代码是这样的:
<script>
$(function() {
$( "#button" ).click(function() {
$( "#item" ).toggle();
});
});
</script>
Let me know if you need anything else
需要帮助请叫我
You can read more about jQuery here: http://jquery.com/
你可以在这里阅读更多关于jQuery的信息:http://jquery.com/
#2
40
To switch the display-style between block
and none
you can do something like this:
要在块和无之间切换显示样式,您可以执行以下操作:
function toggleDiv(id) {
var div = document.getElementById(id);
div.style.display = div.style.display == "none" ? "block" : "none";
}
working demo: http://jsfiddle.net/BQUyT/2/
工作演示:http://jsfiddle.net/BQUyT/2/
#3
1
Try following logic:
尝试以下逻辑:
<script type="text/javascript">
function showHideDiv(id) {
var e = document.getElementById(id);
if(e.style.display == null || e.style.display == "none") {
e.style.display = "block";
} else {
e.style.display = "none";
}
}
</script>
#4
0
with JQuery .toggle()
you can accomplish it easily
使用JQuery .toggle(),您可以轻松完成它
$( ".target" ).toggle();
#5
0
jQuery would be the easiest way if you want to use it, but this should work.
如果你想使用它,jQuery将是最简单的方法,但这应该有效。
<script type="text/javascript">
function showHide(){
var e = document.getElementById('e');
if ( e.style.display != 'none' ) {
e.style.display = 'none';
}
else {
e.style.display = '';
}
}
</script>
#1
24
In case you are interested in a jQuery soluton:
如果您对jQuery soluton感兴趣:
This is the HTML
这是HTML
<a id="button" href="#">Show/Hide</a>
<div id="item">Item</div>
This is the jQuery script
这是jQuery脚本
$( "#button" ).click(function() {
$( "#item" ).toggle();
});
You can see it working here:
你可以看到它在这里工作:
http://jsfiddle.net/BQUyT/
If you don't know how to use jQuery, you have to use this line to load the library:
如果您不知道如何使用jQuery,则必须使用此行来加载库:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
And then use this line to start:
然后使用此行开始:
<script>
$(function() {
// code to fire once the library finishes downloading.
});
</script>
So for this case the final code would be this:
所以对于这种情况,最终的代码是这样的:
<script>
$(function() {
$( "#button" ).click(function() {
$( "#item" ).toggle();
});
});
</script>
Let me know if you need anything else
需要帮助请叫我
You can read more about jQuery here: http://jquery.com/
你可以在这里阅读更多关于jQuery的信息:http://jquery.com/
#2
40
To switch the display-style between block
and none
you can do something like this:
要在块和无之间切换显示样式,您可以执行以下操作:
function toggleDiv(id) {
var div = document.getElementById(id);
div.style.display = div.style.display == "none" ? "block" : "none";
}
working demo: http://jsfiddle.net/BQUyT/2/
工作演示:http://jsfiddle.net/BQUyT/2/
#3
1
Try following logic:
尝试以下逻辑:
<script type="text/javascript">
function showHideDiv(id) {
var e = document.getElementById(id);
if(e.style.display == null || e.style.display == "none") {
e.style.display = "block";
} else {
e.style.display = "none";
}
}
</script>
#4
0
with JQuery .toggle()
you can accomplish it easily
使用JQuery .toggle(),您可以轻松完成它
$( ".target" ).toggle();
#5
0
jQuery would be the easiest way if you want to use it, but this should work.
如果你想使用它,jQuery将是最简单的方法,但这应该有效。
<script type="text/javascript">
function showHide(){
var e = document.getElementById('e');
if ( e.style.display != 'none' ) {
e.style.display = 'none';
}
else {
e.style.display = '';
}
}
</script>