单击特定的标签时，我希望显示下面的 div 以及内部的其他链接

Question

我已经掌握了这个 "simple" 技巧，我有一个带有 6 link 的导航栏，如果我点击其中一个，我想要下面的 div 和其他 links 显示。到目前为止，我能够做到这一点 "working" 但只有第一个 div 和第一个 link 出现了。如果我单击第二个 link，我应该能够显示具有不同 link 的第二个 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>

如果我点击其中一个，我希望显示这些内容（divs 中的这些 links 在导航栏下方，因此不在同一个父级中）关于之前点击的标签.我刚刚发布了其中的 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();

});

更新

大家好，我有一个实际的更新，所以如果我点击 link 我必须向下滑动 div 里面的 link 如果再次点击相同的 link 我应该能够 slideUp 相同 div（到目前为止工作正常）但新的事情是如果我点击第二个 link 当第一个 div 打开前一个应该先 slideUp然后第二个应该 slideDown。非常感谢

Answer 1

你通常这样做的方式通常是将下面的链接放在上面的列表中。

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

Answer 2

也许你可以通过索引连接这些元素。

如果您单击第一个 link - 第一个 .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;
                });
            });

单击特定的标签时，我希望显示下面的 div 以及内部的其他链接

on click to a specific a tag I want a below div with other links inside to be shown

html

jquery

next