Javascript：使用切换按钮隐藏和显示 div 标签答案

【问题标题】：Javascript: Hiding and Showing div tag with a toggle buttonJavascript：使用切换按钮隐藏和显示 div 标签
【发布时间】：2014-01-26 16:10:12
【问题描述】：

我会直接说：

我需要做的是通过按下一个按钮隐藏一个特定的 div，它应该是一个切换，所以基本上：按一次隐藏，再按一次显示，再按一次隐藏等等......

我希望在 CSS 中完成隐藏/显示规则并在纯 javascript 中完成交互（请不要使用 jquery）。好吧，这就是我需要做的，但我不太确定如何执行 javascript 代码。

html:

<p class="button">Show/hide<p>

<div> I want to hide this by pressing the button above</div>

css:

#showhide {
     display: none;
}

.button {
    display: block;
    height: 30px;
    width: 100px;
    background: green;
    text-align: center;
    padding-top: 10px;
    padding-left: 0px;
    font: 15px arial bold;
    border: 1px solid black;
    text-decoration: none;
    list-style:none;
    margin: 10px 0px 10px 0px;
}

http://jsfiddle.net/fyUJc/14/

另外，如果你觉得这个问题不属于这里或者很愚蠢，请尽量不要粗鲁，我只是想在这里学习。

【问题讨论】：

您可以在 div 中添加和删除一个类以显示/隐藏它。优秀的综述：stackoverflow.com/questions/195951/…
用jquery你可以使用这个简单的函数.toggle() api.jquery.com/toggle

标签： javascript css toggle hide show

【解决方案1】：

您可以使用onclick 方法。将您的 HTML 设置为：

<p class="button" onclick="toggle_visibility('hideMe')">Show/hide</p>
<div id="hideMe">I want to hide this by pressing the button above</div>

并拥有以下 JavaScript：

function toggle_visibility(id) 
{
    var e = document.getElementById(id);
    if (e.style.display == 'block' || e.style.display=='')
    {
        e.style.display = 'none';
    }
    else 
    {
        e.style.display = 'block';
    }
}

DEMO

【讨论】：

【解决方案2】：

这里是您的代码的更新 JSFiddle，它适用于本机浏览器方法并实现一个简单的切换组件 - http://jsfiddle.net/fyUJc/31/

var button = document.querySelector('.button');
button.addEventListener('click', function(event) {
    var target = document.querySelector(button.getAttribute('data-target'));
    if (target.style.display == "none") {
        target.style.display = "block";
        button.innerHTML = button.getAttribute('data-shown-text');
    } else {
        target.style.display = "none";
        button.innerHTML = button.getAttribute('data-hidden-text');
    }
});

通过创建一个切换按钮，您将进入 GUI 领域，这是非常复杂的事情。

当前的浏览器技术没有提供一套丰富的工具来帮助您处理您需要在 GUI 中处理的所有事情。 jQuery 也无济于事，因为 GUI 更多的是处理组件和状态，而不是操作 DOM。

即使上面的代码在 Chrome 中工作，您仍然需要注意 DOM 和事件中的浏览器差异，并且您需要对组件进行更好的抽象。我的代码中有很多问题没有解决，如果您每次都从头开始编写它们，将很难正确解决。比如：

如何初始化页面上新添加的切换器？
如何同步 div 和按钮的状态？
如何扩展和插入按钮行为？

我强烈建议您研究为常见问题提供解决方案的 UI 相关库或框架。请参阅 ReactJS、Dojo 或 Sencha（例如 ExtJS）等等。寻找定义小部件/组件生命周期的框架以及扩展和定义自定义框架的方法。

浏览器技术只是没有为制作 UI 组件提供适当的抽象。

【讨论】：

【解决方案3】：

在您的 HTML 标记中使用“onclick”属性的替代解决方案：

<!DOCTYPE html>
    <html>
        <head>
           <script>
               function toggle(){
                   var div = document.getElementById("divSection");
                   if (div.style.display =='block'){
                       div.style.display = 'none';
                       return;
                   }
                   div.style.display ='block';
             }
           </script>
        </head>

        <body>
            <p>Click the button to trigger a function.</p>
            <p class="button" onclick="toggle()">Show/hide</p>
            <div id='divSection'> I want to hide this by pressing the button above</div>
        </body>
    </html>

希望对你有帮助。

【讨论】：

【解决方案4】：

您可以将事件侦听器添加到P 标签并调用Toggle() 函数来交换显示值，如下所示。

此处为示例 - JSFiddle

function Toggle() {
    var div = document.getElementsByTagName('div')[0];

    if (div.style.display == 'none') {
        div.style.display = 'block';
    } else {
        div.style.display = 'none';
    }
}

(function () {

    var button = document.querySelectorAll(".button");

    for (var i = 0; i < button.length; i++) {
        if (button[i].addEventListener) {
            button[i].addEventListener("click", function () {
                Toggle();
            });
        } else {
            button[i].attachEvent("click", function () {
                Toggle();
            });
        }
    }
})();

尽管您最好将IDs 添加到您的元素中以使其更易于引用。

【讨论】：