ent.querySelector('.c-Filters__items--brands'); const categoryFilter = document.querySelector('.m-ProductsListing__filters'); const productLineFilter = document.querySelector('.m-ProductsListing__product_line'); // 初始化状态 function initToggleStates() { buttons.forEach(button => { const title = button.querySelector('.c-ButtonDropdown__title').textContent.trim(); let filterElement; if (title === 'Brand') { filterElement = brandFilter; } else if (title === 'Category') { filterElement = categoryFilter; // 确保Product line按钮不处于选中状态 const productLineButton = buttons.find(btn => btn.querySelector('.c-ButtonDropdown__title').textContent.trim() === 'Product line' ); if (button.classList.contains('is--checked') && productLineButton) { productLineButton.classList.remove('is--checked'); if (productLineFilter) productLineFilter.style.display = 'none'; } } else if (title === 'Product line') { filterElement = productLineFilter; // 确保Category按钮不处于选中状态 const categoryButton = buttons.find(btn => btn.querySelector('.c-ButtonDropdown__title').textContent.trim() === 'Category' ); if (button.classList.contains('is--checked') && categoryButton) { categoryButton.classList.remove('is--checked'); if (categoryFilter) categoryFilter.style.height = '0px'; } } if (button.classList.contains('is--checked')) { if (filterElement == document.querySelector('.c-Filters__items--brands')) { filterElement.style.maxheight = '54px' } else if (filterElement == document.querySelector('.m-ProductsListing__filters')) { filterElement.style.height = '116px' } else if (filterElement == document.querySelector( '.m-ProductsListing__product_line')) { // filterElement.style.height = '339px' filterElement.style.display = 'block' } } else { if (filterElement !== document.querySelector('.m-ProductsListing__product_line')) filterElement.style.height = '0px', filterElement.style.maxheight = '0px'; if (filterElement == document.querySelector('.m-ProductsListing__product_line')) filterElement.style.display = 'none'; } }); } // 切换显示/隐藏函数 function toggleFilter(button) { const title = button.querySelector('.c-ButtonDropdown__title').textContent.trim(); let filterElement; if (title === 'Brand') { filterElement = brandFilter; } else if (title === 'Category') { filterElement = categoryFilter; // 关闭Product line面板 const productLineButton = buttons.find(btn => btn.querySelector('.c-ButtonDropdown__title').textContent.trim() === 'Product line' ); console.log(productLineButton); if (productLineButton && productLineButton.classList.contains('is--checked')) { productLineButton.classList.remove('is--checked'); if (productLineFilter) productLineFilter.style.display = 'none'; } } else if (title === 'Product line') { filterElement = productLineFilter; // 关闭Category面板 const categoryButton = buttons.find(btn => btn.querySelector('.c-ButtonDropdown__title').textContent.trim() === 'Category' ); if (categoryButton && categoryButton.classList.contains('is--checked')) { categoryButton.classList.remove('is--checked'); if (categoryFilter) categoryFilter.style.height = '0px'; } } if (filterElement == document.querySelector('.c-Filters__items--brands')) { button.classList.toggle('is--checked'); filterElement.style.height = button.classList.contains('is--checked') ? '54px' : '0px'; } if (filterElement == document.querySelector('.m-ProductsListing__filters')) { button.classList.toggle('is--checked'); filterElement.style.height = button.classList.contains('is--checked') ? '116px' : '0px'; } if (filterElement == document.querySelector('.m-ProductsListing__product_line')) { button.classList.toggle('is--checked'); // filterElement.style.height = button.classList.contains('is--checked') ? '210px' : '0px'; filterElement.style.display = button.classList.contains('is--checked') ? 'block' : 'none'; } } // 添加事件监听器 buttons.forEach(button => { button.addEventListener('click', function(e) { e.stopPropagation(); toggleFilter(button); }); }); // 点击页面其他区域关闭所有过滤器 // document.addEventListener('click', function() { // buttons.forEach(button => { // button.classList.remove('is--checked'); // }); // if (brandFilter) brandFilter.style.display = 'none'; // if (categoryFilter) categoryFilter.style.display = 'none'; // if (productLineFilter) productLineFilter.style.display = 'none'; // }); // 阻止过滤器区域点击事件冒泡 if (brandFilter) brandFilter.addEventListener('click', function(e) { e.stopPropagation(); }); if (categoryFilter) categoryFilter.addEventListener('click', function(e) { e.stopPropagation(); }); if (productLineFilter) productLineFilter.addEventListener('click', function(e) { e.stopPropagation(); }); // 初始化 initToggleStates(); });