點擊一個特定的標籤我想要一個下面的div與其他鏈接裏面顯示

Question

我被放在這個「簡單」的把戲，我有一個導航欄與6個鏈接，如果我點擊其中一個我想要與其他鏈接顯示在下面的div。 到目前爲止，我能夠做到這一點「工作」，但只有第一個鏈接的第一個div出現。 如果我點擊第二個鏈接，我應該可以顯示不同鏈接的第二個div。 不知道如何歸檔，如果可能的話，希望有一個澄清。 我確定我可以使用兄弟姐妹或我嘗試過的下一個，但我也確定我沒有以正確的方式使用它們。 非常感謝幫助

這是到目前爲止的代碼

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> 

如果我點擊其中一個，我想這將顯示（內部div的這些鏈接是導航欄下方所以不在同一父母）關於前一個標籤點擊。我剛剛發佈了他們的2，但有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

大家好， 我有一個實際的更新，所以，如果我點擊鏈接我必須slideDown與其中的鏈接div，如果再次點擊相同的鏈接，我應該能夠slideUp相同的div（這是工作很好，但迄今），但新的thi ng是如果我點擊第二個鏈接時，第一個div打開前一個應該首先slideUp，然後第二個應該slideDown。 非常感謝

Answer 1

也許你可以通過索引連接這些元素。

如果您單擊第一個鏈接 - 第一個.aedisplaydiv-belownavbar是目標。

喜歡的東西：

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

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

編輯：

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

第二個編輯：

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

通常這樣做的方式通常是將下面的鏈接放到上面的列表中。

<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> 

腳本：

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