Угловой материал — эффект тени мат-аккордеона при выборе этого элемента описания аккордеона. ⇐ CSS

[Anonymous]

Я использую Angular Material 14 с Angular 15, и ниже приведен код для отображения пунктов меню с помощью mat-nav-list

Код: Выделить всё

user1
User 1



user2
User 2



user3
User 3





[img]../../../../assets/images/icon_bell.svg[/img]
Submenu
Accordion



Submenu 1

Submenu 2
Submenu
3

Ниже приведен список меню, который появляется с этим кодом.
[img]https:// i.stack.imgur.com/CtQrU.png[/img]

Код CSS, связанный с меню, приведен ниже...

Код: Выделить всё

.mat-panel-description-setting {
color: $white;
padding-top: 10px;
padding-left: 30px;
flex-basis: 100%;
}

.mat-expansion-panel-header {
padding: 0 16px !important;
}

.list-item-setting {
padding: 0!important;
padding-left: 16px;
color: $white;
}

.add-padding-to-mat-panel-header {
color: $white;
padding-left: 16px;
}

Как я могу сделать тот же эффект для элементов подменю «Гармошка» Описание при выборе любого из элементов подменю в списке. Я имею в виду, что если пользователь выбирает подменю 2, то он должен выделиться полосой (эффект тени), которую я показал на рисунке для этого элемента подменю 2.
Я пробовал использовать для элементов подменю «Аккордеон», и он там не принимается.
EDIT< /strong>
С помощью кода, приведенного в ответе, я получаю снимок экрана, показанный ниже. Я немного изменил ваш код, используя @HostListener вместо document.addEventListener. Серый фон не исчезает при нажатии второго пункта подменю. И ширина охватывает только этот текст.


Может ли кто-нибудь пролить свет на этот вопрос..

Подробнее здесь: https://stackoverflow.com/questions/771 ... cordion-de