数据过滤器默认不显示任何内容

Question

我有这段代码，我希望他不显示任何内容，除非单击 div。默认情况下，它会显示列出的所有内容，但我需要它来显示通过单击过滤的内容。有什么想法吗？

<section class="our_services_tow">
    <div class="container">
        <div class="architecture_area services_pages">
            <div class="portfolio_filter portfolio_filter_2">
                <ul>
                    <li data-filter=".enc"><a href=""><i class="fa fa-archive" aria-hidden="true"></i>ENCOMENDAS</a></li>
                    <li data-filter=".format"><a href=""><i class="fa fa-file" aria-hidden="true"></i>FORMATOS FICHEIRO</a></li>
                    <li data-filter=".prazos"><a href=""><i class="fa fa-calendar" aria-hidden="true"></i>PRAZOS</a></li>
                    <li data-filter=".entreg"><a href=""><i class="fa fa-truck" aria-hidden="true"></i>ENTREGAS</a></li>
                    <li data-filter=".pag"><a href=""><i class="fa fa-credit-card" aria-hidden="true"></i>PAGAMENTOS</a></li>
                </ul>
            </div>
            <div class="portfolio_item portfolio_2">
               <div class="grid-sizer-2"></div>
                <div class="single_facilities col-sm-7 enc">
                    <div class="who_we_area">
                        <div class="subtittle">
                            <h2>blablabla</h2>
                        </div>
                        <p>blablabla</p>
                        <p>blablabla</p>

                    </div>

                </div>

                <div class="single_facilities col-sm-7 format">
                    <div class="who_we_area">
                        <div class="subtittle">
                            <h2>Preferência de formatos de ficheiro.</h2>
                        </div>
                        <p>blablabla</p>
                        <p>blablabla</p>

                    </div>

                </div>

Answer 1

使用 css 隐藏 div，使其加载隐藏，让另一个 div 具有 onclick() 事件（为什么是 div？你可以使用按钮）调用 JavaScript 函数并显示使用该函数隐藏的 div