Dev Faq
0
votes

masquer l'élément quand montrer un autre

Comment puis-je fermer un élément (Menu .SUB) quand une autre est ouverte s'il vous plaît?

Ceci est mon code P>

p> 

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="menu">

  <li class="menu-item menu-item-has-children">
    <a href="#" aria-expanded="false" class="">
                               Item 1
           </a>

    <ul class="sub-menu one">
      <li class="menu-item">
        <a href="#" aria-current="page">
                                [Current] Lvl2. Children 1
            </a>

      </li>
      <li class="menu-item">
        <a href="#">
                                Lvl2. Children 2 with long text lorem ipsum
            </a>

      </li>
      <li class="menu-item menu-item-has-children">
        <a href="#" aria-expanded="false">
                                Link 2
            </a>

        <ul class="sub-menu">
          <li class="menu-item">
            <a href="#">
                                Lvl3. Children 1
            </a>

          </li>
          <li class="menu-item">
            <a href="#" aria-current="page">
                                [Current] Lvl3. Children 2 with long text lorem ipsum
            </a>

          </li>
          <li class="menu-item">
            <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl3. Children 3
            <span class="icon-link-external" aria-hidden="true"></span></a>

          </li>
        </ul>
      </li>
      <li class="menu-item">
        <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl2. Children 4
            <span class="icon-link-external" aria-hidden="true"></span></a>

      </li>
    </ul>
  </li>
  <li class="menu-item menu-item-has-children">
    <a href="#" aria-expanded="false" class="">
                                Link 2
         </a>

    <ul class="sub-menu two">
      <li class="menu-item">
        <a href="#" aria-current="page">
                                [Current] Lvl2. Children 1
            </a>

      </li>
      <li class="menu-item">
        <a href="#">
                                Lvl2. Children 2 with long text lorem ipsum
            </a>

      </li>
      <li class="menu-item menu-item-has-children">
        <a href="#" aria-expanded="false">
                                Lvl2. Children 3 with children
            </a>

        <ul class="sub-menu">
          <li class="menu-item">
            <a href="#">
                                Lvl3. Children 1
            </a>

          </li>
          <li class="menu-item">
            <a href="#" aria-current="page">
                                [Current] Lvl3. Children 2 with long text lorem ipsum
            </a>

          </li>
          <li class="menu-item">
            <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl3. Children 3
            <span class="icon-link-external" aria-hidden="true"></span></a>

          </li>
        </ul>
      </li>
      <li class="menu-item">
        <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl2. Children 4
            <span class="icon-link-external" aria-hidden="true"></span></a>

      </li>
    </ul>
  </li>



</ul>

0 commentaires

3 Réponses :

0
votes

La meilleure approche consiste à masquer tous les articles, puis à ne montrer que la branche d'arborescence dont vous avez besoin.

Pour afficher la branche, passez à travers tous les éléments de cliqué sur une pour racine une.

1 commentaires

Merci de votre réponse, je suis toujours débutant sur JS pourriez-vous m'aider sur la façon de le faire dans l'exemple (extrait) s'il vous plaît?

0
votes

$ ('. Menu-item-halfants> a'). ATTR ("ARIA-DROPED ', FAUX); Appelez ceci et je vois que vous utilisez ce class est ouvert . Chaque fois que l'élément de clic sur la liste s'appelle appelez la fonction ci-dessus et supprimez la classe de la DOM afin que les autres ouvertures de la liste soient ouvertes, puis Calle cela sur l'actuel pour qu'il soit ouvert.

ou en utilisant jQuery, vous pouvez appeler changer la propriété de style pour afficher NONE.

2 commentaires

Merci de réponse, ici, j'ai une condition "si", où puis-je mettre $ ('. Menu-item-hay-wen-enfants> a'). ATT ("ARIA-ARRIMÉE", FAUX); ? et je n'ai pas compris ce que vous avez dit à propos de la classe ".is-ouverte"

appeler ce code $ (".menu") .Nind ('. est-ouvert'); si cela donne des résultats true, retirez la classe de l'élément en premier si l'état est d'abord, puis en ajoutant à l'élément qui est cliqué maintenant.

1
votes

Vous pouvez réinitialiser la chose entière à l'intérieur de votre part d'autre.

p> 

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="menu">

  <li class="menu-item menu-item-has-children">
    <a href="#" aria-expanded="false" class="">
                               Item 1
           </a>

    <ul class="sub-menu one">
      <li class="menu-item">
        <a href="#" aria-current="page">
                                [Current] Lvl2. Children 1
            </a>

      </li>
      <li class="menu-item">
        <a href="#">
                                Lvl2. Children 2 with long text lorem ipsum
            </a>

      </li>
      <li class="menu-item menu-item-has-children">
        <a href="#" aria-expanded="false">
                                Link 2
            </a>

        <ul class="sub-menu">
          <li class="menu-item">
            <a href="#">
                                Lvl3. Children 1
            </a>

          </li>
          <li class="menu-item">
            <a href="#" aria-current="page">
                                [Current] Lvl3. Children 2 with long text lorem ipsum
            </a>

          </li>
          <li class="menu-item">
            <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl3. Children 3
            <span class="icon-link-external" aria-hidden="true"></span></a>

          </li>
        </ul>
      </li>
      <li class="menu-item">
        <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl2. Children 4
            <span class="icon-link-external" aria-hidden="true"></span></a>

      </li>
    </ul>
  </li>
  <li class="menu-item menu-item-has-children">
    <a href="#" aria-expanded="false" class="">
                                Link 2
         </a>

    <ul class="sub-menu two">
      <li class="menu-item">
        <a href="#" aria-current="page">
                                [Current] Lvl2. Children 1
            </a>

      </li>
      <li class="menu-item">
        <a href="#">
                                Lvl2. Children 2 with long text lorem ipsum
            </a>

      </li>
      <li class="menu-item menu-item-has-children">
        <a href="#" aria-expanded="false">
                                Lvl2. Children 3 with children
            </a>

        <ul class="sub-menu">
          <li class="menu-item">
            <a href="#">
                                Lvl3. Children 1
            </a>

          </li>
          <li class="menu-item">
            <a href="#" aria-current="page">
                                [Current] Lvl3. Children 2 with long text lorem ipsum
            </a>

          </li>
          <li class="menu-item">
            <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl3. Children 3
            <span class="icon-link-external" aria-hidden="true"></span></a>

          </li>
        </ul>
      </li>
      <li class="menu-item">
        <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl2. Children 4
            <span class="icon-link-external" aria-hidden="true"></span></a>

      </li>
    </ul>
  </li>



</ul>

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO