使用Javascript显示和隐藏div

时间:2014-03-21 15:30:21

标签: javascript html css show-hide

这是我的代码:

<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都有专门命名,所以这个函数需要能够处理所有的div。

感谢任何帮助!

3 个答案:

答案 0 :(得分:1)

我认为你需要这个:

首先,您需要使用以下

更改标记
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'; 
    }
}

Fiddle

答案 1 :(得分:1)

首先,您必须更改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

您应该传递var id附加char x,但是您将id+x作为字符传递

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';
        }
    }

DEMO

答案 2 :(得分:1)

您可以使用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>

http://jsfiddle.net/YG3kK/