我正在创建一个具有下拉菜单的网站。目前，它仅支持下拉菜单中的一个选项卡（只能单击和下拉一项）。我想做的是让这些选项卡中的多个出现在页面上，与页面上已存在的选项卡在同一行。
我想知道应该如何在此下拉菜单中添加另一个标签。我已经尝试了多种方法来在下拉菜单上获得多个选项卡，但是它们没有起作用。要在下拉菜单中拥有更多标签，例如已经拥有的标签，我该怎么办？我应该如何处理？需要从一个选项卡的现有下拉菜单中复制，粘贴，修改或添加哪些内容？
这是我的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');
}
});
});
如何解决此问题，并在下拉菜单中有更多选项卡？
您需要使用与该类不同的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');
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句