Klicken Sie auf ein bestimmtes Tag Ich möchte ein unter div mit anderen Links innerhalb gezeigt werden

Question

Ich habe auf diesem "einfachen" Trick bestückt, ich habe eine Navbar mit 6 Links und wenn ich auf eine von ihnen ich will klicken ein unter div mit anderen Links angezeigt werden. Bisher konnte ich das "arbeiten" machen, aber nur das erste div mit den ersten Links erscheint. Wenn ich auf den zweiten Link klicke, sollte ich das zweite div mit verschiedenen Links anzeigen können. Ich bin mir nicht sicher, wie ich das archivieren soll und möchte, wenn möglich, eine Klarstellung vornehmen. Ich bin mir sicher, ich könnte Geschwister oder nächste, die ich versucht habe, aber ich bin sicher, ich verwende sie nicht auf eine ordnungsgemäße Weise. Vielen Dank für

helfen

Dies ist der Code so weit

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> 

Wenn ich Sie auf einen von ihnen, ich möchte diese angezeigt werden (diese Links innerhalb divs unterhalb der Navigationsleiste ist also nicht im selben Elternteil) bezüglich des vorherigen Tags geklickt. Ich gab nur 2 von ihnen, aber es gibt 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(); 

}); 

UPDATE

Hallo allerseits, Ich habe ein aktuelles Update, so dass, wenn ich auf Der Link Ich habe slideDown das div mit den Links darin und wenn ich noch einmal auf den gleichen Link klicken, sollte ich in der Lage sein, das gleiche div (das funktioniert soweit gut) aber das neue thi ng ist, wenn ich auf den zweiten Link klicke, wenn der erste div geöffnet wird, sollte der vorhergehende SlideUp zuerst und dann der zweite dlideDown sein. Vielen Dank

Answer 1

Vielleicht können Sie diese Elemente von Index verbinden.

Wenn Sie auf den ersten Link klicken - das erste .aedisplaydiv-belownavbar ist das Ziel.

Etwas wie:

$('.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() 
     }); 
}); 

Zweite Edit:

$('.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

Die Art und Weise, wie Sie dies normalerweise tun, ist in der Regel durch die folgenden Links in die obere Liste.

<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(); 
});