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

xzv2uavs 于 2023-06-22 发布在 jQuery

关注(0)|答案(2)|浏览(147)

我一直在这个“简单”的伎俩储备，我有一个导航栏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是下面的导航栏，所以不是在同一个父）关于以前的一个标签点击。我只贴了两个，但有六个
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打开前一个应该先向上滑动，然后第二个应该向下滑动。多谢了

jquery

来源：https://stackoverflow.com/questions/45632384/on-click-to-a-specific-a-tag-i-want-a-below-div-with-other-links-inside-to-be-sh

2条答案

按热度按时间

bgibtngc1#

也许你可以通过索引来连接这些元素。
如果你点击第一个链接-第一个.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;
                });
            });

赞(0）回复(0）举报 2023-06-22

n3schb8v2#

你通常这样做的方式通常是把下面的链接到上面的列表。

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

赞(0）回复(0）举报 2023-06-22

我来回答

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

2条答案

相关问题

热门标签

最新问答