使用 Javascript 显示和隐藏 div答案

【问题标题】：Showing and Hiding divs with Javascript使用 Javascript 显示和隐藏 div
【发布时间】：2014-03-21 15:30:20
【问题描述】：

这是我的代码：

<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。

感谢任何帮助！

【问题讨论】：

单击 [+] 时您希望发生什么？
试试toggle_visibility('httpserver')
和 document.getElementById(id + 'x')
@Matt - 他想隐藏
，而不是
你为什么不用jQuery和toggle()

标签： javascript html css show-hide

【解决方案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

您应该传递附加char x 的var id，但您将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

【讨论】：

还要注意需要引用httpserver toggle_visiblity("httpserver")
这与“try toggle_visibility('httpserver')”一起工作！！
我实际上只是注意到 [+] 没有更改为 [-]。有什么想法吗？
@Darkmatter5 yes check here jsfiddle.net/LnDUR/1 你必须在 HTML 中以 display:none 开头
是的，我从 display:none 开始，但 [+] 没有改变。您提供的示例似乎也没有改变。

【解决方案2】：

我认为你需要这个：

首先您需要使用以下内容更改标记

onclick="toggle_visibility('httpserver');" // Wrap id with ''

由于js中有一些引号错误，请在下面查找cmets：

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

【讨论】：

【解决方案3】：

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

【讨论】：