Jquery 在点击一个特定的标签，我想下面的div与其他链接内显示

我已经在这个“简单”的技巧库存，我有一个导航栏与6个链接，如果我点击其中一个，我希望下面的div与其他链接显示。 到目前为止，我能够做到这一点“工作”，但只是第一个div与第一个链接出现。 如果我点击第二个链接，我应该能够显示不同链接的第二个div。 不确定如何存档，如果可能，希望得到澄清。 我相信我可以使用兄弟姐妹或下一个，我试图，但我也肯定我没有以适当的方式使用他们。 非常感谢你的帮助

这是到目前为止的代码

HTML

更新

大家好,， 我有一个实际的更新，所以如果我点击链接，我必须滑下它里面的链接div，如果再次点击相同的链接，我应该能够滑出相同的div（这是目前为止工作良好）但新的事情是，如果我在第一个div打开时单击第二个链接，那么前一个链接应该首先滑动，然后第二个链接应该向下滑动。

---

非常感谢

您通常的做法是将下面的链接放到上面的列表中

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

---

通常的做法是将下面的链接放到上面的列表中

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

---

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

如果单击第一个链接，则WnAvbar下面的第一个.aedisplaydiv就是目标

比如：

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

---

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

如果单击第一个链接，则WnAvbar下面的第一个.aedisplaydiv就是目标

比如：

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

---

这实际上是“工作”，但打开一个接一个，我想隐藏以前打开的，如果点击一个新的，但感谢一个抱歉的朋友，字面上尝试了一段时间，但再次不确定是什么错。我对你的答案投了更高的票，因为它实际上是正确的，但近乎完美。如果单击此按钮，则切换向下或向上滑动，但如果打开并单击另一个按钮，则将其向上滑动，并单击新的已单击按钮向下滑动。您是否仍使用.slideToggle（）？您必须使用.slideDown（）和.slideUp（）。因为您完全知道目标必须上下滑动。使用slideUp（）替换。hide（）替换。使用slideDown（）替换。show（）是的，我尝试了此选项，但有两个问题，在您编辑的代码中，一旦打开，它们就不会滑动。2） 然后，因为是开放的，所以类与.aedisplay belownavbar inner内联。我试图编写$（'.aedisplaydiv belownavbar.is open'）.slideUp（），并且正在执行某种技巧，但再次自动向下滑动。感谢这实际上是“工作”，但是一个接一个打开，我想隐藏以前打开的如果点击一个新的，但感谢一个很抱歉的朋友，字面上尝试了一段时间，但再次不确定是什么错。我对你的答案投了更高的票，因为它实际上是正确的，但近乎完美。如果单击此按钮，则切换向下或向上滑动，但如果打开并单击另一个按钮，则将其向上滑动，并单击新的已单击按钮向下滑动。您是否仍使用.slideToggle（）？您必须使用.slideDown（）和.slideUp（）。因为您完全知道目标必须上下滑动。使用slideUp（）替换。hide（）替换。使用slideDown（）替换。show（）是的，我尝试了此选项，但有两个问题，在您编辑的代码中，一旦打开，它们就不会滑动。2） 然后，因为是开放的，所以类与.aedisplay belownavbar inner内联。我试图编写$（'.aedisplaydiv belownavbar.is open'）.slideUp（），并且正在执行某种技巧，但再次自动向下滑动。Thanksys是有道理的，但对于这样的风格来说很棘手，所以我更喜欢把它放在单独的分区中，顺便说一句，非常感谢：-）是的，有道理，但对于这样的风格来说很棘手，所以我更喜欢把它放在单独的分区中，顺便说一句，非常感谢：-）

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