Question

我会正确的：

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

我希望隐藏/显示规则在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/

另外，如果你认为这个问题不属于这个或者是愚蠢的，请尽量避免粗鲁，我只是想在这里学习。

Answer 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

Answer 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），仅举几例。寻找定义Widget / Component生命周期的框架以及扩展和定义自定义生命周期的方法。

浏览器技术不能为制作UI组件提供正确的抽象。

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

我希望它有所帮助。

Answer 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添加到元素中，以便更容易引用。

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

4 个答案: