Question

我正在尝试使用类名来实现隐藏其他div的过滤器。到目前为止，我有以下代码，但遗憾的是，这些代码无效。请帮帮我，THX !!!

<button id="toggle">Toggle</button>
<div class="text to-filter">Lorem ipsum dolor sit amet.</div>
<div class="text not-to-filter">Lorem ipsum dolor sit amet.</div>

<script>
 var button = document.getElementById('toggle'),
 text = Array.document.getElementsByClassName("text");
 button.onclick = function() {
   var isHidden = texts.style.display == 'none';
   text.forEach(function(){
    style.display = isHidden ? 'block' : 'none';
   });
 };
</script>

Answer 1

这是一个javascript版本。

在按钮上添加'onclick = toggleDiv（）'属性，然后

function toggleDiv() {
    var text = document.getElementsByClassName("text");
    for (var i = 0; i < text.length; i++) {
        var status = text[i].style.display;
        text[i].style.display = (status=="" || status=="block") ? "none":"block";
    };
}

点击该按钮，所有'text'类div将打开或关闭。

Answer 2

以下代码会在用户第一次点击.to-filter时隐藏具有类#toggle的所有元素。当他们再次点击它时，它将再次显示元素。

$('#toggle').on('click', function() {
    $('.to-filter').toggle();
});

Toggle-Button按类隐藏其他元素

2 个答案: