sur cliquez sur un tag spécifique Je veux un ci-dessous div avec d'autres liens à l'intérieur pour être montré

Question

Je suis stocké sur ce "simple" tour, j'ai une barre de navigation avec 6 liens et si je clique sur l'un d'entre eux je veux un ci-dessous div avec d'autres liens à afficher. Jusqu'à présent, j'étais capable de faire ce "travail" mais juste le premier div avec les premiers liens apparaît. Si je clique sur le deuxième lien, je devrais pouvoir afficher la deuxième div avec des liens différents. Je ne sais pas comment archiver cela et j'aimerais avoir une clarification si possible. Je suis sûr que je pourrais utiliser des frères et soeurs ou prochaine que j'ai essayé mais je suis sûr que je ne les utilise pas correctement. Merci beaucoup pour aider

Ce code est jusqu'à présent

HTML

<ul class="nav navbar-nav"> 
        <li class="aetoggle-desktoplist"><span class="icon-myaccount"></span><a href="#">My Account</a></li> 
        <li class="aetoggle-desktoplist"><span class="icon-cards"></span><a href="#">Cards</a></li> 
        <li class="aetoggle-desktoplist"><span class="icon-travel"></span><a href="#">Travel</a></li> 
        <li class="aetoggle-desktoplist"><span class="icon-insurance"></span><a href="#">Insurance</a></li> 
        <li class="aetoggle-desktoplist"><span class="icon-rewards"></span><a href="#">Rewards</a></li> 
        <li class="aetoggle-desktoplist"><span class="icon-business"></span><a href="#">Business</a></li> 
</ul> 

Si je clique sur l'un d'eux, je veux que ces à afficher (ces liens à l'intérieur divs est en dessous de la barre de navigation donc pas dans le même parent) en ce qui concerne le précédent une étiquette cliquée. Je viens de publier deux d'entre eux, mais il y a 6

HTML

<div class="aedisplaydiv-belownavbar"> 
     <div class="aedisplaydiv-belownavbar-inner"> 
      <div class="row"> 
       <div class="col-lg-3 col-md-3 col-sm-6"> 
        <ul> 
         <li><p>Card Account</p></li> 
         <li><a href="#">Account Home</a></li> 
         <li><a href="#">Rewgister for Online Services</a></li> 
         <li><a href="#">Activate a new Card</a></li> 
         <li><a href="#">Support 24/7</a></li> 
         <li><a href="#">Download the Amex App</a></li> 
        </ul> 
       </div> 
       <div class="col-lg-3 col-md-3 col-sm-6"> 
        <ul> 
         <li><p>Business Account</p></li> 
         <li><a href="#">American Express @Work</a></li> 
         <li><a href="#">Online Merchant Services</a></li> 
         <li><a href="#">International Payment for Businesses</a></li> 
        </ul> 
       </div> 
       <div class="col-lg-3 col-md-3 col-sm-12"> 
        <ul> 
         <li><p>Other Accounts</p></li> 
         <li><a href="#">International Money Transfer for Card Members</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- Cards --> 
    <div class="aedisplaydiv-belownavbar"> 
     <div class="aedisplaydiv-belownavbar-inner"> 
      <div class="row"> 
       <div class="col-lg-3 col-md-3 col-sm-6"> 
        <ul> 
         <li><p>Personal Cards</p></li> 
         <li><a href="#">Vies Personal Cards</a></li> 
         <li><a href="#">View Dollars and Euro Cards</a></li> 
         <li><a href="#">Credit Cards</a></li> 
         <li><a href="#"</a></li> 
         <li><a href="#">Refer friends. Get rewarded.</a></li> 
        </ul> 
       </div> 
       <div class="col-lg-3 col-md-3 col-sm-6"> 
        <ul> 
         <li><p>Small Business Cards</p></li> 
         <li><a href="#">View All Business Cards</a></li> 
         <li><a href="#">Compare Business Cards</a></li> 
         <li><a href="#">Gold Business Charge</a></li> 
         <li><a href="#">Platinum Business Charge</a></li> 
         <li><a href="#">Why American Express for your Business</a></li> 
        </ul> 
       </div> 
       <div class="col-lg-3 col-md-3 col-sm-12"> 
        <ul> 
         <li><p>Corporate Cards</p></li> 
         <li><a href="#">Find out about our Corporate Cards</a></li> 
         <li><a href="#">Compare Solutions</a></li> 
         <li><a href="#">Enquire about the Corporate Card programme</a></li> 
        </ul> 
       </div> 
       <div class="col-lg-3 col-md-3 col-sm-12"> 
        <ul> 
         <li><p>Gift Cards</p></li> 
         <li><a href="#">View Gift Cards</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 

JS

$('.aetoggle-desktoplist').on("click", function (e) { 
e.preventDefault(); 

var $this = $('.aedisplaydiv-belownavbar'); 

$this.slideToggle('.aedisplaydiv-belownavbar').next().hide(); 

}); 

MISE À JOUR

Salut tout le monde, J'ai une mise à jour réelle, donc si je clique sur le lien que je dois faire glisser le div avec les liens à l'intérieur et si vous cliquez à nouveau sur le même lien, je devrais être capable de glisser le même div (cela fonctionne bien jusqu'à présent), mais le nouveau thi ng est si je clique sur le deuxième lien quand le premier div ouvert le précédent devrait glisser en premier, puis le second devrait glisser vers le bas. Merci beaucoup

Answer 1

Peut-être que vous pouvez connecter ces éléments par index.

Si vous cliquez sur le premier lien - le premier .aedisplaydiv-belownavbar est la cible.

Quelque chose comme:

$('.aetoggle-desktoplist').each(function (index) { 
     var $this = $(this), 
      target = $('.aedisplaydiv-belownavbar').eq(index); 

     $this.on("click", function (e) { 
      e.preventDefault(); 
      target.slideToggle() 
     }); 
}); 

Edit:

$('.aetoggle-desktoplist').each(function (index) { 
     var $this = $(this), 
      target = $('.aedisplaydiv-belownavbar').eq(index); 

     $this.on("click", function (e) { 


      e.preventDefault(); 
      // hide others 
      $('.aedisplaydiv-belownavbar is-open').hide() 
      // show this 
      target.addClass('is-open').show() 
     }); 
}); 

Deuxième édition:

$('.aetoggle-desktoplist').each(function (index) { 
       var $this = $(this), 
        target = $('.aedisplaydiv-belownavbar').eq(index); 

       $this.on("click", function (e) { 
        e.preventDefault(); 
        var isOpen = $('.aedisplaydiv-belownavbar.is-open'); 

        if (isOpen.length > 0 && !isOpen.is(target)) { 
         isOpen.slideUp() 
         isOpen.removeClass('is-open'); 
         target.addClass('is-open').slideDown() 

         return undefined; 
        } 

        if (isOpen.is(target)) { 
         target.removeClass('is-open').slideUp() 
         return undefined; 
        } 

        target.addClass('is-open').slideDown() 
        return undefined; 
       }); 
      }); 

Answer 2

La façon habituelle de procéder est de mettre les liens ci-dessous dans la liste supérieure.

<li class="aetoggle-desktoplist"> 
    <span class="icon-myaccount"></span> 
    <a href="#"> 
     My Account 
     <ul> 
      <li><p>Card Account</p></li> 
      <li><a href="#">Account Home</a></li> 
      <li><a href="#">Rewgister for Online Services</a></li> 
      <li><a href="#">Activate a new Card</a></li> 
      <li><a href="#">Support 24/7</a></li> 
      <li><a href="#">Download the Amex App</a></li> 
     </ul> 
    </a> 
</li> 

Script:

$('.aetoggle-desktoplist > a').on("click", function (e) { 
    $('.aetoggle-desktoplist ul').hide(); 
    $(this).find('ul').show(); 
});