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

Posted

技术标签:

【中文标题】单击特定的标签时,我希望显示下面的 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 中,顺便说一句非常感谢 :-)

以上是关于单击特定的标签时,我希望显示下面的 div,其中包含其他链接的主要内容,如果未能解决你的问题,请参考以下文章

在 vuejs 和 laravel 的循环中显示特定的 div `@click`

Android:单击按钮时如何显示TextView?

单击或触摸时切换 div 并在单击/触摸/向外滚动时隐藏

单击复选框时更改标签颜色

单击另一个 div 时,移动到具有类的下一个 div

Javascript:使用切换按钮隐藏和显示 div 标签