使每个下拉子菜单成为同位素过滤器

Question

我正在使用Isotope创建一个具有多重过滤功能的图库。 它使用下拉菜单和子菜单来获取过滤按钮。但我想要的是：每个子菜单都要过滤，所以它只显示子菜单（当我点击它时）和按钮过滤的内容。

实施例

  

混合＆gt; Aluminio＆gt; Aparador

当我点击Aluminio以显示其按钮时，我只想显示aluminio个项目。然后当我点击 Aparador 按钮时，它只显示Aluminio和Aparador个项目。

到目前为止，只有最后的按钮实际上过滤了我的项目。

是否可以做类似的事情？

到目前为止我所拥有的：

    <div class="container-fluid produto-home text-">
    <div class="container">
        <div class="row">
            <ul class="nav nav-pills">
                <li role="presentation" class="dropdown prod-hover filters">
                    <button class="dropdown-toggle prod-toggle prod-title button-group" data-toggle="dropdown" role="button" aria-haspopup="true" data-submenu aria-expanded="false" data-filter="">
                        <h2 class="text-uppercase">Mix</h2>
                    </button>
                    <ul class="dropdown-menu prodmenu">
                        <li class="dropdown-submenu">
                            <button class="text-uppercase text-center transicao button-group" tabindex="0" data-filter-group="aluminio">
                                Alumínio
                            </button>
                            <ul class="dropdown-menu cols prod-filters">
                                <button class="button" data-filter=".aparador">Aparador</button>
                                <button class="button" data-filter=".banco">Banco</button>
                                <button class="button" data-filter=".banqueta">Banqueta</button>
                                <button class="button" data-filter=".buffet">Buffet</button>
                                <button class="button" data-filter=".cabeceira">Cabeceira</button>

                                <button class="button" data-filter=".cadeira">Cadeira</button>
                                <button class="button" data-filter=".chaise">Chaise</button>
                                <button class="button" data-filter=".estante">Estante</button>
                                <button class="button" data-filter=".luminaria">Luminária</button>
                                <button class="button" data-filter=".mesa">Mesa</button>

                                <button class="button" data-filter=".poltrona">Poltrona</button>
                                <button class="button" data-filter=".puff">Puff</button>
                                <button class="button" data-filter=".sofa">Sofá</button>
                            </ul>
                        </li>

                        <li class="dropdown-submenu">
                            <button class="text-uppercase text-center prodsub transicao button-group" tabindex="0" data-filter-group="madeira">
                                Madeira
                            </button>
                            <ul class="dropdown-menu cols prod-filters">
                                <button class="button" data-filter=".aparador">Aparador</button>
                                <button class="button" data-filter=".banco-madeira">Banco</button>
                                <button class="button" data-filter=".banqueta-madeira">Banqueta</button>
                                <button class="button" data-filter=".buffet-madeira">Buffet</button>
                                <button class="button" data-filter=".cabeceira-madeira">Cabeceira</button>

                                <button class="button" data-filter=".cadeira-madeira">Cadeira</button>
                                <button class="button" data-filter=".chaise-madeira">Chaise</button>
                                <button class="button" data-filter=".estante-madeira">Estante</button>
                                <button class="button" data-filter=".luminaria">Luminária</button>
                                <button class="button" data-filter=".mesa">Mesa</button>

                                <button class="button" data-filter=".poltrona-madeira">Poltrona</button>
                                <button class="button" data-filter=".puff-madeira">Puff</button>
                                <button class="button" data-filter=".sofa-madeira">Sofá</button>
                            </ul>
                        </li>

                        <li class="dropdown-submenu">
                            <button class="text-uppercase text-center prodsub transicao button-group" tabindex="-1" data-filter-group="sintetico">
                                Sintético
                            </button>
                            <ul class="dropdown-menu cols prod-filters">
                                <button class="button" data-filter=".aparador">Aparador</button>
                                <button class="button" data-filter=".banco">Banco</button>
                                <button class="button" data-filter=".banqueta">Banqueta</button>
                                <button class="button" data-filter=".buffet">Buffet</button>
                                <button class="button" data-filter=".cabeceira">Cabeceira</button>

                                <button class="button" data-filter=".cadeira">Cadeira</button>
                                <button class="button" data-filter=".chaise">Chaise</button>
                                <button class="button" data-filter=".estante">Estante</button>
                                <button class="button" data-filter=".luminaria">Luminária</button>
                                <button class="button" data-filter=".mesa">Mesa</button>

                                <button class="button" data-filter=".poltrona">Poltrona</button>
                                <button class="button" data-filter=".puff">Puff</button>
                                <button class="button" data-filter=".sofa">Sofá</button>
                            </ul>
                        </li>
                    </ul>
                </li>

                <li role="presentation" class="dropdown">
                    <button class="dropdown-toggle button-group" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-filter-group="fibra">
                        <h2 class="text-uppercase">Fibra</h2>
                    </button>
                    <ul class="dropdown-menu">
                        <li class="dropdown-submenu">
                            <a tabindex="-1" href="#">
                                <h3>Alumínio</h3>
                            </a>
                            <ul class="dropdown-menu cols">
                                <li>Aparador</li>
                                <li>Banco</li>
                                <li>Banqueta</li>
                                <li>Buffet</li>
                                <li>Cabeceira</li>

                                <li>Cadeira</li>
                                <li>Chaise</li>
                                <li>Estante</li>
                                <li>Luminária</li>
                                <li>Mesa</li>

                                <li>Poltrona</li>
                                <li>Puff</li>
                                <li>Sofá</li>
                            </ul>
                        </li>
                    </ul>
                </li>

                <li role="presentation" class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                        <h2 class="text-uppercase">Design</h2>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-submenu">
                            <a tabindex="-1" href="#">
                                <h3>Alumínio</h3>
                            </a>
                            <ul class="dropdown-menu cols">
                                <li>Aparador</li>
                                <li>Banco</li>
                                <li>Banqueta</li>
                                <li>Buffet</li>
                                <li>Cabeceira</li>

                                <li>Cadeira</li>
                                <li>Chaise</li>
                                <li>Estante</li>
                                <li>Luminária</li>
                                <li>Mesa</li>

                                <li>Poltrona</li>
                                <li>Puff</li>
                                <li>Sofá</li>
                            </ul>
                        </li>
                    </ul>
                </li>

                <li role="presentation" class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                        <h2 class="text-uppercase">Lazer</h2>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-submenu">
                            <a tabindex="-1" href="#">
                                <h3>Alumínio</h3>
                            </a>
                            <ul class="dropdown-menu cols">
                                <li>Aparador</li>
                                <li>Banco</li>
                                <li>Banqueta</li>
                                <li>Buffet</li>
                                <li>Cabeceira</li>

                                <li>Cadeira</li>
                                <li>Chaise</li>
                                <li>Estante</li>
                                <li>Luminária</li>
                                <li>Mesa</li>

                                <li>Poltrona</li>
                                <li>Puff</li>
                                <li>Sofá</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="container-fluid produtos">
    <div class="row">
        <div class="grid">
            <div class="grid-sizer"></div>
            <div class="grid-item aluminio aparador">
                <img src="" />
            </div>
            <div class="grid-item aluminio banco-madeira">
                <img src="" />
            </div>
            <div class="grid-item aluminio banqueta">
                <img src="" />
            </div>
            <div class="grid-item aluminio buffet cabeceira">
                <img src="" />
            </div>
            <div class="grid-item madeira cabeceira cadeira">
                <img src="" />
            </div>
            <div class="grid-item madeira cadeira chaise">
                <img src="" />
            </div>
            <div class="grid-item madeira chaise-madeira estante-madeira">
                <img src="" />
            </div>
            <div class="grid-item aluminio estante luminaria">
                <img src="" />
            </div>
            <div class="grid-item madeira luminaria mesa">
                <img src="" />
            </div>
        </div>
    </div>
</div>

JS

    $(document).ready( function() {
  // init Isotope
  var $grid = $('.grid').isotope({
    itemSelector: '.grid-item'
  });

  // store filter for each group
  var filters = {};

  $('.filters').on( 'click', '.button', function() {
    var $this = $(this);
    // get group key
    var $buttonGroup = $this.parents('.button-group');
    var filterGroup = $buttonGroup.attr('data-filter-group');
    // set filter for group
    filters[ filterGroup ] = $this.attr('data-filter');
    // combine filters
    var filterValue = concatValues( filters );
    // set filter for Isotope
    $grid.isotope({ filter: filterValue });
  });

  // change is-checked class on buttons
  $('.button-group').each( function( i, buttonGroup ) {
    var $buttonGroup = $( buttonGroup );
    $buttonGroup.on( 'click', 'button', function() {
      $buttonGroup.find('.is-checked').removeClass('is-checked');
      $( this ).addClass('is-checked');
    });
  });

    // layout Isotope after each image loads
    $grid.imagesLoaded().progress( function() {
      $grid.isotope('layout');
    });
});

// flatten object by concatting values
function concatValues( obj ) {
  var value = '';
  for ( var prop in obj ) {
    value += obj[ prop ];
  }
  return value;
}

CSS：

/* ---- grid ---- */

.grid {
  background: #e0e0e0;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer {
  width: 25%;
  margin: 64px 0;
}

.grid-item {
  float: left;
  border: 1px solid #bdbdbd;
  width: 370px;
  height: 370px;
  margin: 8px;
  overflow: hidden;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

.produtos {
    overflow-y: scroll;
    padding: 0 64px !important;
    background: #e0e0e0;
}

.button.is-checked {
    background-color: #000;
  color: fff;
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}