[英]Showing and Hiding divs with Javascript
這是我的代碼:
<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>
當我點擊+沒有任何反應。 我最終會有多個div,每個都有特別命名,所以這個函數需要能夠處理所有的div。
任何幫助表示贊賞!
我想你需要這個:
首先,您需要使用以下更改標記
onclick="toggle_visibility('httpserver');" // Wrap id with ''
由於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';
}
}
首先,您必須更改HTML。 傳遞值時必須添加""
。
更改
onclick="toggle_visibility(httpserver);"
至
onclick="toggle_visibility('httpserver');"
HTML:
<a href="#" onclick="toggle_visibility('httpserver');" id="httpserverx">[+]</a>
<div id="httpserver" style="display:none;">
....my content...
</div>
然后改變
document.getElementById('id + x').innerText
至
document.getElementById(id + 'x').innerText
您應該傳遞附加了char x
的var id
,但是將id+x
作為char傳遞
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';
}
}
您可以使用CSS以更簡潔,更簡單的方式完成此操作,只需通過JS切換類。 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.