[英]Showing and Hiding divs with Javascript
Here's my code: 这是我的代码:
<script>
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'none') {
document.getElementById('id + x').innerText = '[-]';
e.style.display = 'block';
}
else {
document.getElementById('id + x').innerText = '[+]';
e.style.display = 'none';
}
}
</script>
<a href="#" onclick="toggle_visibility(httpserver);" id="httpserverx">[+]</a>
<div id="httpserver" style="display:block;">
....my content...
</div>
When I click the + nothing happens. 当我点击+没有任何反应。 I will eventually have multiple divs, each specifically named, so this function needs to be able to handle all the divs.
我最终会有多个div,每个都有特别命名,所以这个函数需要能够处理所有的div。
Any help is appreciated! 任何帮助表示赞赏!
I think you need this: 我想你需要这个:
First you need to change markup with following 首先,您需要使用以下更改标记
onclick="toggle_visibility('httpserver');" // Wrap id with ''
As there was some quotes error in js too look for the comments in the below: 由于js中有一些引号错误,因此请查看下面的注释:
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'none') {
document.getElementById(id + 'x').innerText = '[-]'; // Miss placed quotes ' with id and x
e.style.display = 'block';
} else {
document.getElementById(id + 'x').innerText = '[+]'; // Miss placed quotes ' with id and x
e.style.display = 'none';
}
}
First you have to change your HTML. 首先,您必须更改HTML。 You have to add
""
when you pass the value. 传递值时必须添加
""
。
Change 更改
onclick="toggle_visibility(httpserver);"
to 至
onclick="toggle_visibility('httpserver');"
HTML: HTML:
<a href="#" onclick="toggle_visibility('httpserver');" id="httpserverx">[+]</a>
<div id="httpserver" style="display:none;">
....my content...
</div>
And then change 然后改变
document.getElementById('id + x').innerText
to 至
document.getElementById(id + 'x').innerText
You should pass the var id
appended with the char x
but you pass the id+x
as a char 您应该传递附加了
char x
的var id
,但是将id+x
作为char传递
JS: JS:
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'none') {
document.getElementById(id + 'x').innerText = '[-]';
e.style.display = 'block';
}
else {
document.getElementById(id + 'x').innerText = '[+]';
e.style.display = 'none';
}
}
You can accomplish this in a more concise and easier fashion using CSS and simply toggling a class via JS. 您可以使用CSS以更简洁,更简单的方式完成此操作,只需通过JS切换类。 Css content can swap out the + or - as well as show/hide the relevant contents.
Css内容可以换出+或 - 以及显示/隐藏相关内容。
.collapsible .toggle:before { content: '[+]' }
.collapsible.opened .toggle:before { content: '[-]' }
.collapsible .contents { display: none }
.collapsible.opened .contents { display: block }
$('.collapsible').on('click','.toggle',function() {
$(this).parent().toggleClass('opened');
});
<section class="collapsible"><a class="toggle" data-contents="part1">Part1</a><div class="contents" id="contents-part1">This is the expand/collapse content.</div></section>
<section class="collapsible"><a class="toggle" data-contents="part2">Part2</a><div class="contents" id="contents-part2">This is the expand/collapse content.</div></section>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.