单击特定的标签时，我希望显示下面的 div，其中包含其他链接

Posted 2023-02-25

【中文标题】单击特定的标签时，我希望显示下面的 div，其中包含其他链接

【英文标题】：on click to a specific a tag I want a below div with other links inside to be shown

【发布时间】：2017-08-11 10:01:05

【问题描述】：

我已经掌握了这个“简单”的技巧，我有一个带有 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();

);

更新

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

【参考方案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;
                );
            );

【讨论】：

这实际上是“工作”，但正在一个一个打开，如果点击一个新的，我想隐藏以前打开的，但非常感谢

对不起，伙计，确实尝试了一段时间，但又不确定出了什么问题。我赞成您的回答，因为它实际上是正确的，但几乎是完美的。如果单击此切换幻灯片向下或向上滑动，但如果打开并单击另一张幻灯片，则将其向上滑动，新点击的一张向下滑动

你还在使用 .slideToggle() 吗？您必须使用 .slideDown() 和 .slideUp()。因为您确切地知道哪个目标必须向下和向上滑动。

将 .hide() 替换为 slideUp() 将 .show() 替换为 slideDown()

是的，我尝试了此选项，但有 2 个问题，在您编辑的代码中，一旦打开它们就不会滑动。 2）然后因为 is-open 类与 .aedisplay-belownavbar-inner 内联，所以我尝试编写 $('.aedisplaydiv-belownavbar.is-open').slideUp() 并且有点做伎俩但再次自动向下滑动。谢谢

【参考方案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();
);

【讨论】：

是的，但这种风格很棘手，所以我更喜欢将它放在单独的 div 中，顺便说一句非常感谢 :-)