На этом шаге мы рассмотрим доработку свертывания и развертывания разделов с учетом фильтра.
Реализация развертывания и свертывания разделов таблицы, добавленная ранее, также вступает в конфликт с реализацией фильтров.
Если раздел был свернут, то в случае выбора нового фильтра соответствующие ему строки отображаются на странице несмотря на то, что раздел был свернут. Напротив, если раздел был развернут, то в случае применения фильтра отображаться будут все строки раздела независимо от того, соответствуют ли они фильтру или нет.
Один из способов исправить последнюю ситуацию состоит в том, чтобы изменить способ отображения и сокрытия строк. Если для сокрытия строк использовать класс CSS, тогда нам не потребуется явно вызывать методы .hide() и .show(). Заменив в реализации свертывания разделов вызов метода .hide() на вызов .addClass('filtered') и вызов метода .show() на вызов .removeClass('filtered') и добавив определение класса CSS, мы сможем обеспечить корректное сокрытие и отображение строк. При удалении класса из строк в свернутом разделе они больше не будут отображаться по ошибке.
Добавление нового класса filtered поможет нам и в решении обратной проблемы. Мы можем реализовать проверку отфильтрованных строк при развертывании раздела, пропуская их, вместо того чтобы отображать. Проверка наличия данного класса - это лишь вопрос добавления :not(.filtered) в селектор, используемый реализацией развертывания раздела.
Теперь наши реализации работают, как ожидается, и каждая из них способна скрывать и отображать строки независимо от другой.
На следующем шаге мы приведем окончательную версию приложения.
