我有一个非常复杂的案例。 我已经创建了一个jquery函数来使用bootstrap框架和mysql数据库来构建菜单来存储元素。 即使我直接在测试页面中复制/粘贴也显示并且正常工作，结果看起来还不错，但肯定不是目标，因为我希望它是动态的。 问题是当我让jquery构建代码时我不能使用selector来激活下拉函数，例如这里是构建HTML代码的jquery：
$.ajax({
url: 'GetMenu',
success: function (data) {
var charWrap ="";
var charMenu ="";
data = JSON.parse(data);
var category = ['femme','homme'];
$.each(category, function (e) {
charWrap += "<ul><li class=\"" + category[e] + "\"><a href=\"#demo" + e + "\" class=\"" + category[e] + "\" data-toggle=\"collapse\" data-parent=\"#MainMenu\"><strong>" + category[e].toUpperCase() + "<\/strong><\/a><\/li><\/ul>";
charWrap += "<div class=\"collapse\" id=\"demo" + e + "\">";
charMenu += "<li class=\"dropdown\">";
charMenu += "<a href=\"#\" class=\"dropdown-toggle\" role=\"button\" aria-haspopup=\"true\"><strong>" + category[e].toUpperCase() + "<\/strong><\/a>";
charMenu += "<div class=\"row dropdown-menu dropdown-menu-left MenuCategoryLGSS\" >";
charMenu += "<div class=\"col-md-4\">";
charMenu += "<ul class=\"img-menu\">";
if (category[e] === 'femme'){
charMenu += "<li><img src=\"\/ArtShoppingJWeb\/img\/femme.png\" ><\/li>";
}
if (category[e] === 'homme'){
charMenu += "<li><img src=\"\/ArtShoppingJWeb\/img\/homme.png\" ><\/li>";
}
if (category[e] === 'enfant'){
charMenu += "<li><img src=\"\/ArtShoppingJWeb\/img\/enfant.png\" ><\/li>";
}
if (category[e] === 'ameublement'){
charMenu += "<li><img src=\"\/ArtShoppingJWeb\/img\/ameublement.png\" ><\/li>";
}
if (category[e] === 'deco'){
charMenu += "<li><img src=\"\/ArtShoppingJWeb\/img\/deco.png\" ><\/li>";
}
if (category[e] === 'divers'){
charMenu += "<li><img src=\"\/ArtShoppingJWeb\/img\/divers.png\" ><\/li>";
}
charMenu += "<\/ul>";
charMenu += "<\/div>";
charMenu += "<div class=\"col-md-8\">";
dataElt = JSON.parse(JSON.stringify(data[category[e]]));
$.each(dataElt, function (index) {
elt = JSON.parse(JSON.stringify(dataElt[index]));
$.each(elt, function (index) {
console.log("index : " + index);
charWrap += "<ul><li><a href=\"#" + category[e] + "-" + index + "\" class=\"\" data-toggle=\"collapse\" data-parent=\"#" + category[e] + "-" + index + "\">" + index + "<i class=\"fa fa-caret-down\"><\/i><\/a><\/li><\/ul>";
charWrap += "<div class=\"collapse identSubmenu2 list-group-submenu\" id=\"" + category[e] + "-" + index + "\">";
charMenu += "<ul><li><a href=\"#" + category[e] + "-" + index + "-menu\" data-toggle=\"collapse\" data-parent=\"#" + category[e] + "-menu\" >" + index + "<\/a><\/li><\/ul>";
charMenu += "<div class=\"identSubmenu4 collapse list-group-submenu\" id=\"" + category[e] + "-" + index + "-menu\" >";
var arValues = elt[index];
$.each(arValues, function (element) {
charWrap += "<a href=\"#\" class=\"list-group-item\" data-parent=\"#" + category[e] + "-" + index + "\">" + arValues[element] + "<\/a>";
charMenu += "<a href=\"#\" class=\"list-group-item\" data-parent=\"#" + category[e] + "-" + index + "-menu\" >" + arValues[element] + "<\/a>";
})
charWrap += "<\/div>";
charMenu += "<\/div>";
})
})
charWrap += "<\/div>";
charMenu += "<\/div>";
charMenu += "<\/div>";
charMenu += "<\/li>";
})
$(".MenuCategory").append(charWrap);
$("#MenuCategoryLG").append(charMenu);
}
这里完成了结果：
<div class="nav navbar-nav visible-lg">
<ul class="nav navbar-nav navbar-right" id="MenuCategoryLG">
<li class="dropdown">
<a href="#" class="dropdown-toggle" role="button" aria-haspopup="true"><strong>FEMME</strong></a>
<div class="row dropdown-menu dropdown-menu-left MenuCategoryLGSS">
<div class="col-md-4">
<ul class="img-menu">
<li><img src="/ArtShoppingJWeb/img/femme.png"></li>
</ul>
</div>
<div class="col-md-8">
<ul>
<li><a href="#femme-Bijoux-menu" data-toggle="collapse" data-parent="#femme-menu">Bijoux</a></li>
</ul>
<div class="identSubmenu4 collapse list-group-submenu" id="femme-Bijoux-menu"><a href="#" class="list-group-item" data-parent="#femme-Bijoux-menu">bague</a><a href="#" class="list-group-item" data-parent="#femme-Bijoux-menu">boucle d'oreilles</a><a href="#" class="list-group-item" data-parent="#femme-Bijoux-menu">bracelet</a><a href="#" class="list-group-item" data-parent="#femme-Bijoux-menu">collier</a><a href="#" class="list-group-item" data-parent="#femme-Bijoux-menu">pendentif</a></div>
<ul>
<li><a href="#femme-Coiffure-menu" data-toggle="collapse" data-parent="#femme-menu">Coiffure</a></li>
</ul>
<div class="identSubmenu4 collapse list-group-submenu" id="femme-Coiffure-menu"><a href="#" class="list-group-item" data-parent="#femme-Coiffure-menu">bandeau</a><a href="#" class="list-group-item" data-parent="#femme-Coiffure-menu">chapeau</a><a href="#" class="list-group-item" data-parent="#femme-Coiffure-menu">coiffe</a></div>
<ul>
<li><a href="#femme-Sac-menu" data-toggle="collapse" data-parent="#femme-menu">Sac</a></li>
</ul>
<div class="identSubmenu4 collapse list-group-submenu" id="femme-Sac-menu"><a href="#" class="list-group-item" data-parent="#femme-Sac-menu">pochette</a><a href="#" class="list-group-item" data-parent="#femme-Sac-menu">sac a main - saccoche</a><a href="#" class="list-group-item" data-parent="#femme-Sac-menu">sac de voyage</a></div>
<ul>
<li><a href="#femme-Vetements-menu" data-toggle="collapse" data-parent="#femme-menu">Vetements</a></li>
</ul>
<div class="identSubmenu4 collapse list-group-submenu" id="femme-Vetements-menu"><a href="#" class="list-group-item" data-parent="#femme-Vetements-menu">ceinture</a><a href="#" class="list-group-item" data-parent="#femme-Vetements-menu">chaussure</a><a href="#" class="list-group-item" data-parent="#femme-Vetements-menu">costume</a><a href="#" class="list-group-item" data-parent="#femme-Vetements-menu">jupe</a><a href="#" class="list-group-item" data-parent="#femme-Vetements-menu">maillots de bain</a><a href="#" class="list-group-item" data-parent="#femme-Vetements-menu">pantalon</a></div>
</div>
</div>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" role="button" aria-haspopup="true"><strong>HOMME</strong></a>
<div class="row dropdown-menu dropdown-menu-left MenuCategoryLGSS">
<div class="col-md-4">
<ul class="img-menu">
<li><img src="/ArtShoppingJWeb/img/homme.png"></li>
</ul>
</div>
<div class="col-md-8">
<ul>
<li><a href="#homme-Bijoux-menu" data-toggle="collapse" data-parent="#homme-menu">Bijoux</a></li>
</ul>
<div class="identSubmenu4 collapse list-group-submenu" id="homme-Bijoux-menu"><a href="#" class="list-group-item" data-parent="#homme-Bijoux-menu">bague</a><a href="#" class="list-group-item" data-parent="#homme-Bijoux-menu">boucle d'oreilles</a><a href="#" class="list-group-item" data-parent="#homme-Bijoux-menu">bracelet</a><a href="#" class="list-group-item" data-parent="#homme-Bijoux-menu">collier</a><a href="#" class="list-group-item" data-parent="#homme-Bijoux-menu">pendentif</a></div>
<ul>
<li><a href="#homme-Coiffure-menu" data-toggle="collapse" data-parent="#homme-menu">Coiffure</a></li>
</ul>
<div class="identSubmenu4 collapse list-group-submenu" id="homme-Coiffure-menu"><a href="#" class="list-group-item" data-parent="#homme-Coiffure-menu">bandeau</a><a href="#" class="list-group-item" data-parent="#homme-Coiffure-menu">chapeau</a></div>
<ul>
<li><a href="#homme-Sac-menu" data-toggle="collapse" data-parent="#homme-menu">Sac</a></li>
</ul>
<div class="identSubmenu4 collapse list-group-submenu" id="homme-Sac-menu"><a href="#" class="list-group-item" data-parent="#homme-Sac-menu">sac a main - saccoche</a><a href="#" class="list-group-item" data-parent="#homme-Sac-menu">sac de voyage</a></div>
<ul>
<li><a href="#homme-Vetements-menu" data-toggle="collapse" data-parent="#homme-menu">Vetements</a></li>
</ul>
<div class="identSubmenu4 collapse list-group-submenu" id="homme-Vetements-menu"><a href="#" class="list-group-item" data-parent="#homme-Vetements-menu">ceinture</a><a href="#" class="list-group-item" data-parent="#homme-Vetements-menu">chaussure</a><a href="#" class="list-group-item" data-parent="#homme-Vetements-menu">costume</a><a href="#" class="list-group-item" data-parent="#homme-Vetements-menu">maillots de bain</a><a href="#" class="list-group-item" data-parent="#homme-Vetements-menu">pantalon</a></div>
</div>
</div>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" role="button" aria-haspopup="true"><strong>FEMME</strong></a>
<div class="row dropdown-menu dropdown-menu-left MenuCategoryLGSS">
<div class="col-md-4">
<ul class="img-menu">
<li><img src="/ArtShoppingJWeb/img/femme.png"></li>
</ul>
</div>
<div class="col-md-8">
<ul>
<li><a href="#femme-Bijoux-menu" data-toggle="collapse" data-parent="#femme-menu">Bijoux</a></li>
</ul>
<div class="identSubmenu4 collapse list-group-submenu" id="femme-Bijoux-menu"><a href="#" class="list-group-item" data-parent="#femme-Bijoux-menu">bague</a><a href="#" class="list-group-item" data-parent="#femme-Bijoux-menu">boucle d'oreilles</a><a href="#" class="list-group-item" data-parent="#femme-Bijoux-menu">bracelet</a><a href="#" class="list-group-item" data-parent="#femme-Bijoux-menu">collier</a><a href="#" class="list-group-item" data-parent="#femme-Bijoux-menu">pendentif</a></div>
<ul>
<li><a href="#femme-Coiffure-menu" data-toggle="collapse" data-parent="#femme-menu">Coiffure</a></li>
</ul>
<div class="identSubmenu4 collapse list-group-submenu" id="femme-Coiffure-menu"><a href="#" class="list-group-item" data-parent="#femme-Coiffure-menu">bandeau</a><a href="#" class="list-group-item" data-parent="#femme-Coiffure-menu">chapeau</a><a href="#" class="list-group-item" data-parent="#femme-Coiffure-menu">coiffe</a></div>
<ul>
<li><a href="#femme-Sac-menu" data-toggle="collapse" data-parent="#femme-menu">Sac</a></li>
</ul>
<div class="identSubmenu4 collapse list-group-submenu" id="femme-Sac-menu"><a href="#" class="list-group-item" data-parent="#femme-Sac-menu">pochette</a><a href="#" class="list-group-item" data-parent="#femme-Sac-menu">sac a main - saccoche</a><a href="#" class="list-group-item" data-parent="#femme-Sac-menu">sac de voyage</a></div>
<ul>
<li><a href="#femme-Vetements-menu" data-toggle="collapse" data-parent="#femme-menu">Vetements</a></li>
</ul>
<div class="identSubmenu4 collapse list-group-submenu" id="femme-Vetements-menu"><a href="#" class="list-group-item" data-parent="#femme-Vetements-menu">ceinture</a><a href="#" class="list-group-item" data-parent="#femme-Vetements-menu">chaussure</a><a href="#" class="list-group-item" data-parent="#femme-Vetements-menu">costume</a><a href="#" class="list-group-item" data-parent="#femme-Vetements-menu">jupe</a><a href="#" class="list-group-item" data-parent="#femme-Vetements-menu">maillots de bain</a><a href="#" class="list-group-item" data-parent="#femme-Vetements-menu">pantalon</a></div>
</div>
</div>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" role="button" aria-haspopup="true"><strong>HOMME</strong></a>
<div class="row dropdown-menu dropdown-menu-left MenuCategoryLGSS">
<div class="col-md-4">
<ul class="img-menu">
<li><img src="/ArtShoppingJWeb/img/homme.png"></li>
</ul>
</div>
<div class="col-md-8">
<ul>
<li><a href="#homme-Bijoux-menu" data-toggle="collapse" data-parent="#homme-menu">Bijoux</a></li>
</ul>
<div class="identSubmenu4 collapse list-group-submenu" id="homme-Bijoux-menu"><a href="#" class="list-group-item" data-parent="#homme-Bijoux-menu">bague</a><a href="#" class="list-group-item" data-parent="#homme-Bijoux-menu">boucle d'oreilles</a><a href="#" class="list-group-item" data-parent="#homme-Bijoux-menu">bracelet</a><a href="#" class="list-group-item" data-parent="#homme-Bijoux-menu">collier</a><a href="#" class="list-group-item" data-parent="#homme-Bijoux-menu">pendentif</a></div>
<ul>
<li><a href="#homme-Coiffure-menu" data-toggle="collapse" data-parent="#homme-menu">Coiffure</a></li>
</ul>
<div class="identSubmenu4 collapse list-group-submenu" id="homme-Coiffure-menu"><a href="#" class="list-group-item" data-parent="#homme-Coiffure-menu">bandeau</a><a href="#" class="list-group-item" data-parent="#homme-Coiffure-menu">chapeau</a></div>
<ul>
<li><a href="#homme-Sac-menu" data-toggle="collapse" data-parent="#homme-menu">Sac</a></li>
</ul>
<div class="identSubmenu4 collapse list-group-submenu" id="homme-Sac-menu"><a href="#" class="list-group-item" data-parent="#homme-Sac-menu">sac a main - saccoche</a><a href="#" class="list-group-item" data-parent="#homme-Sac-menu">sac de voyage</a></div>
<ul>
<li><a href="#homme-Vetements-menu" data-toggle="collapse" data-parent="#homme-menu">Vetements</a></li>
</ul>
<div class="identSubmenu4 collapse list-group-submenu" id="homme-Vetements-menu"><a href="#" class="list-group-item" data-parent="#homme-Vetements-menu">ceinture</a><a href="#" class="list-group-item" data-parent="#homme-Vetements-menu">chaussure</a><a href="#" class="list-group-item" data-parent="#homme-Vetements-menu">costume</a><a href="#" class="list-group-item" data-parent="#homme-Vetements-menu">maillots de bain</a><a href="#" class="list-group-item" data-parent="#homme-Vetements-menu">pantalon</a></div>
</div>
</div>
</li>
</ul>
</div>
第一个
$("li.dropdown > a").on('mouseover click', function () {
console.log("tototot");
$('li.dropdown').each(function(){
console.log("tututututu");
$(this).removeClass('open');
});
$(this).parent().addClass('open');
});
$('body').on('mouseover', function (e) {
console.log("tata");
if (!$('li.dropdown').is(e.target)
&& $('li.dropdown').has(e.target).length === 0
&& $('.open').has(e.target).length === 0
)
{
$('li.dropdown').removeClass('open');
}
});
如果有人已经面临这个问题，那么很高兴告诉我他是如何解决这个问题的，并提前感谢您的帮助
BR，
雷米
答案 0 :(得分：0)
$(document).on('mouseover click',"li.dropdown > a", function () {
$('li.dropdown').each(function(){
$(this).removeClass('open');
});
$(this).parent().addClass('open');
});
<强> A helpful link.