我有一个很大的菜单,我必须把它放在我的公司网站上。现在的问题是,许多菜单都与一个子菜单列表相关联。我不能创建数据库获取限制的每个li bcz的子ul/子列表。所以,我们的想法是,这可以通过JQuery实现。我确实想在其子列表上单独应用每个列表的条件来打开。所以,我试着写一个智能代码,但它还不能工作。“问题根据样本,第三个列表不显示在悬停”将非常感谢您的帮助,谢谢
$(function() {
$("#ms").hover(
function() {
$("#deptms").removeClass('hidden');
$("#deptss").addClass('hidden');
}
);
$("#ss").hover(
function() {
$("#deptss").removeClass('hidden');
$("#deptms").addClass('hidden');
}
);
});
$(document).ready(function() {
$('a.subparent').hover(function() {
list = $(this).attr('id');
$("#ul_" + list).removeClass('hidden');
});
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="col-md-4 col-lg-4">
<ul>
<li class="waves-effect waves">
<a href="" id="ms"><i class="fa fa-pull-right fa-angle-double-right"></i>Faculty of Management Sciences</a>
</li>
<li class="waves-effect waves">
<a href="" id="ss"><i class="fa fa-pull-right fa-angle-double-right"></i>Faculty of Social Sciences</a>
</li>
</ul>
</div>
<div class="col-md-4 col-lg-4 subparent">
<ul id="deptms" class="hidden">
<li class="waves-effect waves">
<a href="" id="ba"><i class="fa fa-pull-right fa-angle-double-right"></i>Department of Business Administration</a>
</li>
<li class="waves-effect waves">
<a href="" id="mc"><i class="fa fa-pull-right fa-angle-double-right"></i>Department of Commerce</a>
</li>
</ul>
<ul class="hidden" id="deptss">
<li class="waves-effect waves">
<a href="" id="eco"><i class="fa fa-pull-right fa-angle-double-right"></i>Department of Economics</a>
</li>
<li class="waves-effect waves">
<a href="" id="psy"><i class="fa fa-pull-right fa-angle-double-right"></i>Department of Psychology</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-3">
<ul id="ul_ba" class="hidden">
<li class="waves-effect waves">
<a href="">Programs</a>
</li>
<li class="waves-effect waves">
<a href="">Key Personnels</a>
</li>
<li class="waves-effect waves">
<a href="">Research</a>
</li>
<li class="waves-effect waves">
<a href="">Student Counselling</a>
</li>
</ul>
<ul id="ul_mc" class="hidden">
<li class="waves-effect waves">
<a href="">Programs</a>
</li>
<li class="waves-effect waves">
<a href="">Key Personnels</a>
</li>
<li class="waves-effect waves">
<a href="">Research</a>
</li>
<li class="waves-effect waves">
<a href="">Student Counselling</a>
</li>
</ul>
</div>
发布于 2018-06-28 05:41:12
a.subparent
是错误的选择器,因为subparent
类在<div>
上,而不是<a>
上。
<div>
中<a>
的选择器是.subparent a
$(function() {
$("#ms").hover(
function() {
$("#deptms").removeClass('hidden');
$("#deptss").addClass('hidden');
}
);
$("#ss").hover(
function() {
$("#deptss").removeClass('hidden');
$("#deptms").addClass('hidden');
}
);
});
$(document).ready(function() {
$('.subparent a').hover(function() {
list = $(this).attr('id');
$("#ul_" + list).removeClass('hidden');
});
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="col-md-4 col-lg-4">
<ul>
<li class="waves-effect waves">
<a href="" id="ms"><i class="fa fa-pull-right fa-angle-double-right"></i>Faculty of Management Sciences</a>
</li>
<li class="waves-effect waves">
<a href="" id="ss"><i class="fa fa-pull-right fa-angle-double-right"></i>Faculty of Social Sciences</a>
</li>
</ul>
</div>
<div class="col-md-4 col-lg-4 subparent">
<ul id="deptms" class="hidden">
<li class="waves-effect waves">
<a href="" id="ba"><i class="fa fa-pull-right fa-angle-double-right"></i>Department of Business Administration</a>
</li>
<li class="waves-effect waves">
<a href="" id="mc"><i class="fa fa-pull-right fa-angle-double-right"></i>Department of Commerce</a>
</li>
</ul>
<ul class="hidden" id="deptss">
<li class="waves-effect waves">
<a href="" id="eco"><i class="fa fa-pull-right fa-angle-double-right"></i>Department of Economics</a>
</li>
<li class="waves-effect waves">
<a href="" id="psy"><i class="fa fa-pull-right fa-angle-double-right"></i>Department of Psychology</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-3">
<ul id="ul_ba" class="hidden">
<li class="waves-effect waves">
<a href="">Programs</a>
</li>
<li class="waves-effect waves">
<a href="">Key Personnels</a>
</li>
<li class="waves-effect waves">
<a href="">Research</a>
</li>
<li class="waves-effect waves">
<a href="">Student Counselling</a>
</li>
</ul>
<ul id="ul_mc" class="hidden">
<li class="waves-effect waves">
<a href="">Programs</a>
</li>
<li class="waves-effect waves">
<a href="">Key Personnels</a>
</li>
<li class="waves-effect waves">
<a href="">Research</a>
</li>
<li class="waves-effect waves">
<a href="">Student Counselling</a>
</li>
</ul>
</div>
https://stackoverflow.com/questions/51071726
复制相似问题