jquery - 我应该如何在下拉菜单中设置多个选项卡？

Question

我正在创建一个具有下拉菜单的网站。现在，它只支持下拉菜单的一个选项卡(只有一个可以点击和下拉的东西)。我想要做的是让多个这些选项卡在页面上与页面上已有的选项卡在同一行上。

我想知道我应该如何向这个下拉菜单添加另一个选项卡。我已经尝试了多种方法来在下拉菜单中获取多个选项卡，但它们没有用。我需要做什么才能在下拉菜单中添加更多选项卡，例如我已有的选项卡？我应该如何处理它以及我需要从现有的下拉菜单中使用一个选项卡复制、粘贴、修改或添加哪些内容？

这是我的 JSFiddle 和我的下拉菜单:JSFiddle

基本上我想在我的下拉菜单中添加更多选项卡(我可以下拉的东西)，在我已经制作的选项卡所在的同一行中遍历整个页面。我曾尝试在 HTML 代码中复制和粘贴另一个选项卡，但因为它们共享同一个类，所以 jQuery 代码在单击一个选项卡时激活了两个选项卡。我将如何在使用 jQuery 分别处理每个选项卡的同时添加更多选项卡，这样两个选项卡就不会同时激活，这样选项卡就会穿过页面，与我的选项卡在同一行已经做了？

这是我的基本 html:

<h1 id="name">LFX Music</h1>
<div class="click-nav-login">
<ul class="no-js-login">
    <li>
        <a href="#" class="clicker-login">Profile</a>
        <ul>
            <li>
                <a href="#">Dashboard</a>
            </li>
            <li>
                <a href="#">Settings</a>
            </li>
            <li>
                <a href="#">Privacy</a>
            </li>
            <li>
                <a href="#">Help</a>
            </li>
            <li>
                <a href="#">Sign out</a>
            </li>
        </ul>
    </li>
</ul>
</div>
<script src="scripts/js/navigation.js"></script>

但是问题来了，如果我有另一个选项卡，如果一个选项卡被激活，它们都会被激活，因为它们都具有相同的类并使用相同的 jQuery 代码进行处理:

$(function() {
$('.click-nav-login > ul').toggleClass('no-js-login js-login');
$('.click-nav-login .js-login ul').hide();
$('.click-nav-login .js-login').click(function(e) {
    $('.click-nav-login .js-login ul').slideToggle(200);
    $('.clicker-login').toggleClass('active');
    e.stopPropagation();
});
$(document).click(function() {
    if ($('.click-nav-login .js-login ul').is(':visible')) {
        $('.click-nav-login .js-login ul', this).slideUp();
        $('.clicker-login').removeClass('active');
    }
});
});

如何解决此问题并在下拉菜单中添加更多选项卡？

Answer 1

您需要与类(class)不同的 ID。 然后你传递要单击的元素，我在 mi 站点中有此代码:

      function acordion(elemenid) {
        var element = $("#" + elemenid);
        if (element.hasClass("active")) {
            element.removeClass("active");
            element.children().first().next().slideToggle("fast");
            element.children().children().children().attr('src','http://example.com/site/images/up-dpwn.jpg')

        } else {
            element.css('min-height', '0px');
            element.addClass("active");
            element.children().first().next().slideToggle("fast");
            element.children().children().children().attr('src','http://example.com/site/images/down.jpg');
        }
    }