Блог

Я хочу иметь выпадающее меню для каждого элемента списка, как показано на рисунке:

мой код:

HTML:

 <div class="card white">
  <div class="card-content grey-text text-darken-4">
    <span class="card-title grey-text text-darken-4">Card Title</span>
      <a id="myDropdown" class='btn-floating waves-effect waves-light transparent right' href='#' data-activates='myDropdown-menu'><i class="material-icons blue-grey-text text-darken-4">more_vert</i></a>
      <ul id='myDropdown-menu' class='dropdown-content'>
  <li><a href="#">Option 1</a></li>
  <li><a href="#">Option 2</a></li>
</ul>
  </div>
</div>

<div class="card white">
  <div class="card-content grey-text text-darken-4">
    <span class="card-title grey-text text-darken-4">Card Title</span>
      <a id="myDropdown" class='btn-floating waves-effect waves-light transparent right' href='#' data-activates='myDropdown-menu'><i class="material-icons blue-grey-text text-darken-4">more_vert</i></a>
      <ul id='myDropdown-menu' class='dropdown-content'>
  <li><a href="#">Option 1</a></li>
  <li><a href="#">Option 2</a></li>
</ul>
  </div>
</div>
  

JS:

 $("#myDropdown").dropdown();
  

теперь проблема в том, что если я использую id="myDropdown" более одного элемента, он работает только с первым элементом, другие меню работают некорректно. Как я могу это решить.

вот JSFiddle для этого в качестве демонстрации.

Пожалуйста, предложите мне решение. Заранее спасибо.

‘id’, как следует из его названия, является уникальным идентификатором элемента в dom. Убедитесь, что ваши идентификаторы уникальны, и никогда не используйте один и тот же идентификатор для более чем одного элемента. Если вам нужно что-то для идентификации группы элементов, используйте класс.

Идентификатор — это имя, присвоенное элементу, который имеет свой собственный стиль и функцию, и не может быть применен к элементу, который также нуждается в той же функции. Если есть много элементов, которые имеют одинаковый стиль и функцию, используйте ‘class’. Идентификатор может быть применен только один раз. Вот документация: https://www.w3schools.com/htmL/html_id.asp#:~:text= HTML id Attribute 1 Using The,for that… 6 Chapter Summary. More