Запретить закрытие меню MDC после нажатия первого пункта меню

Мы используем компонент меню MDC. Я ищу способ не закрывать меню при нажатии на первый элемент в меню.

Я попробовал применить класс . menu - do - not - закрыть { cursor : auto ! важно ; } и указав курсор как автоматический, но он не работает. 

event.stopPropagation()

ниже приведен пример скрипки

https://jsfiddle.net/phani25485/Lt6q2gxa/2/

Не могли бы вы дать какое-то направление в отношении того, как этого добиться.

javascript,material-design,mdc-components,material-components-web,

1

Ответов: 1

1 принят
+50

Вы можете остановить меню от закрытия после того, как конкретный элемент выбран путем вызова mdc-list-itemна mdc-list-itemсобытии щелчка , когда целевое событие имеет определенный класс , назначенный (поэтому меню переключается открыто и закрыто с помощью кнопки только). Вам нужно будет добавить дополнительный код для обработки события щелчка элемента списка, поскольку это предотвращает нормальную обработку кликов mdc.

JS:

const options = document.querySelectorAll('.mdc-list-item');

//Prevent menu close when option with 'prevent-menu-close' class clicked
for (let option of options) {
  option.addEventListener('click', (event) => {
    let prevent = event.target.classList.contains('prevent-menu-close');
    if(prevent){
      event.stopPropagation();
      // handle 'prevent-menu-close' list item click event
    }
  });
}

HTML:

<div id="demo-menu" class="mdc-menu-surface--anchor">
  <button id="menu-button">Open Menu</button>
  <div class="mdc-menu mdc-menu-surface" tabindex="-1">
    <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical">
      <li class="mdc-list-item prevent-menu-close" role="menuitem">
        <span class="mdc-list-item__text">Prevent Close</span>
      </li>
      <li class="mdc-list-item" role="menuitem">
        <span class="mdc-list-item__text">Another Menu Item</span>
      </li>
    </ul>
  </div>
</div>
JavaScript, материал-дизайн, MDC-компонента, материал-компонента, веб,
Похожие вопросы
Яндекс.Метрика