如何在下拉菜单上设置多个选项卡？

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

你需要一个与全班不同的身份证明。然后传递要单击的元素，我在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');
        }
    }