Question

我正在创建一个包含下拉菜单的网站。现在，它只支持下拉菜单中的一个选项卡（只有一个可以点击和下拉的东西）。我想要做的是让这些标签中的多个与页面上已有的标签位于同一行的页面上。

我想知道如何在此下拉菜单中添加另一个标签。我已经尝试了多项操作来在下拉菜单中显示多个标签，但它们无法正常工作。在下拉菜单中，我需要做些什么才能获得更多标签，例如我已有的标签？我应该如何处理它以及我需要使用一个标签从我现有的下拉菜单中复制，粘贴，修改或添加内容？

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

基本上我想在我的下拉菜单中添加更多标签（我可以下载的东西），在与我已经制作的标签相同的行中浏览页面。我曾尝试仅在HTML代码中复制和粘贴另一个选项卡，但由于它们共享同一个类，因此jQuery代码在单击一个选项卡时激活了两个选项卡。如何在使用jQuery单独处理每个选项卡的同时添加更多选项卡，以便两个选项卡不会同时激活，以便选项卡将跨越页面，与选项卡I＆在同一行上已经制作了？

这是我的基本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');
        }
    }

我应该如何处理下拉菜单中的多个标签？

1 个答案: