Veuillez d'abord voir la page pour comprendre https://ibnul.neocities.org/_temporary/au2p10/au2p10.html

Ici, j'ai plusieurs menus déroulants qui doivent s'ouvrir lorsque l'on clique sur leur bouton d'ouverture respectif (icône à 3 barres). Et il doit également se fermer lorsque vous cliquez à nouveau sur l'icône ou cliquez ailleurs sur la page.

J'ai donc réussi à ouvrir le menu lorsque vous cliquez sur leur bouton respectif et à le fermer lorsque vous cliquez à nouveau ou cliquez à l'extérieur quelque part sur la page.

Mais si je clique sur le premier bouton et sans cliquer à nouveau sur le même bouton ou sans cliquer ailleurs sur la page si je clique sur le deuxième bouton le deuxième menu s'ouvrira pendant que le premier menu est ouvert et aussi si je fais de même pour le troisième menu ensuite le troisième menu s'ouvrira également tandis que les deux précédents seront ouverts. Vous verrez donc les trois menus ouverts en même temps.

C'est le problème. Je veux fermer tous les menus précédents lorsque je clique sur le bouton de menu suivant ou fermer tous les menus suivants lorsque je clique sur le bouton de menu précédent. Le fait est qu'il ne devrait pas y avoir plus d'un menu visible à la fois.

Je veux ouvrir uniquement le dernier et le précédent devrait se fermer lorsque le suivant est cliqué afin que vous ne puissiez pas voir plus d'un menu déroulant à la fois.

Et aussi, je ne veux pas ajouter de nom d'ID sur le fichier html car je dois copier coller ce code html plusieurs fois, vous devez donc me donner une solution uniquement via javascript qui fonctionne avec le même nom de classe pour identifier les éléments où peu importe combien de fois je copie le code html, le menu fonctionnera de la même manière et n'ouvrira pas plus d'un menu à la fois.

Et veuillez l'afficher en pur javascript.


<!DOCTYPE html>
<html lang='en-US'>

<head>

  <title>au2p10</title>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>

  <style>

    * {
      margin: 0px;
      padding: 0px;
      font-family:'Segoe UI', sans-serif;
    }

    a {
      text-decoration: none;
    }

    .res-loc-shre-con {
      display: flex;
      justify-content: flex-end;
      padding: 30px;
    }

    .edit-menu-icon-con {
      position: relative;
      margin: 10px 0px 70px 0px;
    }

    .edit-menu-text-icon-con {
      display: flex;
      align-items: center;
    }

    .edit-menu-sdtext {
      font-size: 14px;
      color: #0086bf;
      padding: 0px 8px 0px 0px;
    }

    .edit-menu-icon-image {
      width: 25px;
      height: 20px;
      padding: 4px 4px 4px 4px;
    }

    .eidit-menu-icon-item-con {
      position: absolute;
      z-index: 2;
      top: 35px;
      right: 0px;
      background-color: white;
      border: 0.9px solid #dadada;
      padding: 4px 0px 4px 0px;
      width: 200px;
      min-height: 100px;
    }


    .edit-menu-drop-down-box {
      position: absolute;
      z-index: 2;
      top: 42px;
      right: -1px;
      width: 180px;
      padding: 3px 0px 3px 0px;
      background-color: white;
      border: 0.9px solid rgb(219, 219, 219);
      display: none;
    }

    .edit-menu-drop-down-box:focus {
      outline: 0px;
    }

    .show-edit-menu-drop-down-box {
      display: block;
    }

    .edit-menu-drop-down-cone-box {
      position: relative;
    }

    .edit-menu-dorp-down-cone {
      position: absolute;
      z-index: -1;
      top: -11px;
      right: 9px;
      width: 14px;
      height: 14px;
      background-color: rgb(255, 255, 255);
      border-left: 0.9px solid rgb(189, 189, 189);
      border-top: 0.9px solid rgb(189, 189, 189);
      transform: rotate(45deg);
    }

    .edit-menu-selectitem {
      display: flex;
      padding: 5px 10px 5px 10px;
    }

    .edit-menu-selectitem:hover {
      background-color:  rgb(238, 238, 238);
    }

    .edit-menu-select-text {
      font-size: 15px;
      color: #7c7c7c;
      padding: 3px 5px 3px 5px;
    }

  </style>

</head>

<!-- start -->
<body>

<div class='res-loc-shre-con'>
  <div class='edit-menu-icon-con'>
    <div class='edit-menu-text-icon-con'>
      <p class='edit-menu-sdtext'>Manage au2</p>
      <img class='edit-menu-icon-image' src='menu-icon-blue.svg' alt=''>
    </div>
    <div class='edit-menu-drop-down-box'>
      <div class='edit-menu-drop-down-cone-box'>
        <div class='edit-menu-dorp-down-cone'></div>
      </div>
      <a class='edit-menu-itemlink' href=''>
        <div class='edit-menu-selectitem'>
          <p class='edit-menu-select-text'>Edit</p>
        </div>
      </a>
      <a class='edit-menu-itemlink' href=''>
        <div class='edit-menu-selectitem'>
          <p class='edit-menu-select-text'>Make Featured</p>
        </div>
      </a>
      <a class='edit-menu-itemlink' href=''>
        <div class='edit-menu-selectitem'>
          <p class='edit-menu-select-text'>Comment</p>
        </div>
      </a>
    </div>
  </div>
</div>

<div class='res-loc-shre-con'>
  <div class='edit-menu-icon-con'>
    <div class='edit-menu-text-icon-con'>
      <p class='edit-menu-sdtext'>Manage au2</p>
      <img class='edit-menu-icon-image' src='menu-icon-blue.svg' alt=''>
    </div>
    <div class='edit-menu-drop-down-box'>
      <div class='edit-menu-drop-down-cone-box'>
        <div class='edit-menu-dorp-down-cone'></div>
      </div>
      <a class='edit-menu-itemlink' href=''>
        <div class='edit-menu-selectitem'>
          <p class='edit-menu-select-text'>Edit</p>
        </div>
      </a>
      <a class='edit-menu-itemlink' href=''>
        <div class='edit-menu-selectitem'>
          <p class='edit-menu-select-text'>Make Featured</p>
        </div>
      </a>
      <a class='edit-menu-itemlink' href=''>
        <div class='edit-menu-selectitem'>
          <p class='edit-menu-select-text'>Comment</p>
        </div>
      </a>
    </div>
  </div>
</div>

<div class='res-loc-shre-con'>
  <div class='edit-menu-icon-con'>
    <div class='edit-menu-text-icon-con'>
      <p class='edit-menu-sdtext'>Manage au2</p>
      <img class='edit-menu-icon-image' src='menu-icon-blue.svg' alt=''>
    </div>
    <div class='edit-menu-drop-down-box'>
      <div class='edit-menu-drop-down-cone-box'>
        <div class='edit-menu-dorp-down-cone'></div>
      </div>
      <a class='edit-menu-itemlink' href=''>
        <div class='edit-menu-selectitem'>
          <p class='edit-menu-select-text'>Edit</p>
        </div>
      </a>
      <a class='edit-menu-itemlink' href=''>
        <div class='edit-menu-selectitem'>
          <p class='edit-menu-select-text'>Make Featured</p>
        </div>
      </a>
      <a class='edit-menu-itemlink' href=''>
        <div class='edit-menu-selectitem'>
          <p class='edit-menu-select-text'>Comment</p>
        </div>
      </a>
    </div>
  </div>
</div>

<script>

  var edit_menu_btns = document.querySelectorAll('.edit-menu-icon-image');
  edit_menu_btns.forEach(btn => {
    btn.addEventListener('click', show_edit_menu_dropdown_box);
  });

  function show_edit_menu_dropdown_box(e) {
    var card = e.target.closest('.edit-menu-icon-con');
    var edit_menu_dropdown_box = card.querySelector('.edit-menu-drop-down-box');
    edit_menu_dropdown_box.classList.toggle('show-edit-menu-drop-down-box');

    window.addEventListener('click', function(event) {
      if (!event.target.matches('.edit-menu-icon-image')) {
        var editMenuDropdowns = document.getElementsByClassName('edit-menu-drop-down-box');
        for (var j = 0; j < editMenuDropdowns.length; j++) {
          var openEditMenuDropdown = editMenuDropdowns[j];
          if (openEditMenuDropdown.classList.contains('show-edit-menu-drop-down-box')) {
            openEditMenuDropdown.classList.remove('show-edit-menu-drop-down-box');
          }
        }
      }
    });
  }

</script>

</body>

Je l'ai mis dans un seul fichier html ( https://ibnul.neocities.org/_temporary/au2p10/au2p10.html ) afin que vous puissiez facilement télécharger la page et essayer votre éditeur de code. Veuillez commenter si vous n'avez compris aucune partie de ma question.

0
Ibnul Alam 14 janv. 2020 à 06:09