在菜单中使用按钮隐藏和显示多个 class 元素

Question

我知道这个问题已经被问过很多次了，但是 none 的问题在某种程度上符合我的情况。

这是我的时间轴网站：http://witch-house.com/thetimeline/

它使用这个结构：

<ul>
<li class="blog"></li>
<li class="blog"></li>
<li class="artist"></li>
<li class="mix"></li>
<li class="blog"></li>
<li class="artist"></li>
.
.
.
</ul>

现在，我想在我的网站顶部有 4 个可点击的按钮：'SHOW ALL'、'ARTISTS'、'BLOGS'、'MIXES'

默认显示所有选项将打开，它将显示所有 <li> 个元素

当您点击 ARTISTS 时，网站将只显示所有 <li> 标记为 class="artist" 的元素 + 将 ARTISTS 按钮颜色更改为红色

当您点击其上的 BLOGS 时，所有带有 class="blog" 标记的 <li> 元素都会出现（在之前点击的 ARTISTS 旁边）+ 按钮的颜色也会变为红色

等等

当您再次单击显示所有按钮时，所有元素都应该可见，所有其他按钮应该恢复为标准颜色。

我找到了这个 "simple" 解决方案： https://isabelcastillo.com/toggle-showhide-multiple-elements-with-pure-javascript

但它只针对兄弟元素，而不是所有 class 元素：

HTML

<h2 class="clickable-heading">Toggle This Dropdown</h2>
<ul>
    <li><a href="#">How To Do This</a></li>
    <li><a href="#">Installing in The Mid 90s</a></li>
</ul>
<h2 class="clickable-heading">Click This Dropdown 2</h2>
<ul>
    <li><a href="#">Vote For Pedro</a></li>
    <li><a href="#">Your Name is Napoleon?</a></li>
</ul>

JS

function toggleDocs(event) {
    if (event.target && event.target.className == 'clickable-heading') {
        var next = event.target.nextElementSibling;
        if (next.style.display == "none") {
            next.style.display = "block";
        } else {
            next.style.display = "none";
        }
    }
}
document.addEventListener('click', toggleDocs, true);

有没有办法调整它？

或者如何解决这个问题的另一个建议？

谢谢！

Answer 1

你可以这样做

Using Pure Javascript

        document.querySelector('#showAll').onclick = function () {
            document.querySelector('#showAll').innerHTML = 'Show All';
            document.querySelector('#toggleBlog').innerHTML = 'Hide Blogs';
            document.querySelector('#toggleMixes').innerHTML = 'Hide Mixes';
            document.querySelector('#toggleArtists').innerHTML = 'Hide Artists';
            document.querySelectorAll('li').forEach(function (item, i) {
                item.style.display = '';
            });
        };

        document.querySelector('#toggleBlog').onclick = function () {
            document.querySelectorAll('li.blog').forEach(function (item, i) {
                item.style.display = item.style.display == '' ? 'none' : '';
            });

            document.querySelector('#toggleBlog').innerHTML = document.querySelector('#toggleBlog').innerHTML == 'Hide Blogs' ? 'Show Blogs' : 'Hide Blogs';
            if (document.querySelector('#toggleBlog').innerHTML == 'Hide Blogs' && document.querySelector('#toggleArtists').innerHTML == 'Hide Artists' && document.querySelector('#toggleMixes').innerHTML == 'Hide Mixes')
                document.querySelector('#showAll').innerHTML = 'Show All';
            else
                document.querySelector('#showAll').innerHTML = 'Not All';
        };

        document.querySelector('#toggleArtists').onclick = function () {
            document.querySelectorAll('li.artist').forEach(function (item, i) {
                item.style.display = item.style.display == '' ? 'none' : '';
            });

            document.querySelector('#toggleArtists').innerHTML = document.querySelector('#toggleArtists').innerHTML == 'Hide Artists' ? 'Show Artists' : 'Hide Artists';
            if (document.querySelector('#toggleBlog').innerHTML == 'Hide Blogs' && document.querySelector('#toggleArtists').innerHTML == 'Hide Artists' && document.querySelector('#toggleMixes').innerHTML == 'Hide Mixes')
                document.querySelector('#showAll').innerHTML = 'Show All';
            else
                document.querySelector('#showAll').innerHTML = 'Not All';
        };

        document.querySelector('#toggleMixes').onclick = function () {
            document.querySelectorAll('li.mix').forEach(function (item, i) {
                item.style.display = item.style.display == '' ? 'none' : '';
            });

            document.querySelector('#toggleMixes').innerHTML = document.querySelector('#toggleMixes').innerHTML == 'Hide Mixes' ? 'Show Mixes' : 'Hide Mixes';
            if (document.querySelector('#toggleBlog').innerHTML == 'Hide Blogs' && document.querySelector('#toggleArtists').innerHTML == 'Hide Artists' && document.querySelector('#toggleMixes').innerHTML == 'Hide Mixes')
                document.querySelector('#showAll').innerHTML = 'Show All';
            else
                document.querySelector('#showAll').innerHTML = 'Not All';
        };

<button id="showAll">Show All</button>
    <button id="toggleBlog">Hide Blogs</button>
    <button id="toggleArtists">Hide Artists</button>
    <button id="toggleMixes">Hide Mixes</button>

    <ul>
        <li class="blog">Blog 1</li>
        <li class="blog">Blog 2</li>
        <li class="artist">Artist 1</li>
        <li class="mix">MIX 1</li>
        <li class="blog">BLOG 3</li>
        <li class="artist">Artist 2</li>
    </ul>

Using jQuery

        $('#showAll').click(function () {
            $('#toggleBlog').html('Hide Blogs');
            $('#toggleMixes').html('Hide Mixes');
            $('#toggleArtists').html('Hide Artists');
            $('li').each(function () {
                $(this).show();
            });
        });

        $('#toggleBlog').click(function () {
            $('li.blog').each(function () {
                $(this).toggle();
            });
            $('#toggleBlog').html($('#toggleBlog').data('state') == 'shown' ? 'Hide Blogs' : 'Show Blogs');
        });

        $('#toggleArtists').click(function () {
            $('li.artist').each(function () {
                $(this).toggle();
            });
            $('#toggleArtists').html($('#toggleArtists').data('state') == 'shown' ? 'Hide Artists' : 'Show Artists');
        });

        $('#toggleMixes').click(function () {
            $('li.mix').each(function () {
                $(this).toggle();
            });
            $('#toggleMixes').html($('#toggleMixes').data('state') == 'shown' ? 'Hide Mixes' : 'Show Mixes');
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <button id="showAll">Show All</button>
    <button id="toggleBlog">Hide Blogs</button>
    <button id="toggleArtists">Hide Artists</button>
    <button id="toggleMixes">Hide Mixes</button>

    <ul>
        <li class="blog">Blog 1</li>
        <li class="blog">Blog 2</li>
        <li class="artist">Artist 1</li>
        <li class="mix">MIX 1</li>
        <li class="blog">BLOG 3</li>
        <li class="artist">Artist 2</li>
    </ul>

这里，我们根据html里面的按钮

来处理切换元素的hide/show状态

并且，单击 show all 按钮后，将显示所有元素

在菜单中使用按钮隐藏和显示多个 class 元素

Hide & show multiple class elements with buttons in the menu

html

javascript

class

list

toggle