我正在使用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);
}