点击一个特定的标签我想要一个下面的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(); 
});