我有像这样的导航html结构。它正在动态创建导航。
<div class="main">
<ul>
<li>
<a href="">Media Centre</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<ul>
<li><a href="">Vision And Mission</a></li>
<li><a href="">Strategic Goals</a></li>
<li><a href="">Task of the Department</a></li>
</ul>
</div>
<div>
</div>
</div>
</div>
</li>
<li><a href="">Contact</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<ul>
</ul>
</div>
<div>
</div>
</div>
</div>
</li>
</ul>
</div>
这里有第一个孩子为ul和li(子菜单)。但是第二个li没有子菜单。但div显示在前端。菜单和子菜单以编程方式出现,因此我无法删除div cbp-hrsub
。当li没有子节点时,我需要更改div显示无。
我试过了:
<script type="text/C#">
$(document).ready(function(){
$('.main ul>li>a').mouseover(function(){
if($(this).closest("li").children("ul").length==0) {
$('.cbp-hrsub').css("display", "none");
}
});
});
</script>
像这样,但div显示没有效果。
答案 0 :(得分:3)
如果您想在鼠标悬停之前隐藏它们,只需在dom ready处理程序中添加以下内容
$('.main .cbp-hrsub').not(':has(li)').hide()
否则
$(document).ready(function () {
$('.main ul>li>a').mouseover(function () {
var $li = $(this).closest("li").children("ul");
if ($(this).closest("li").children("ul").length == 0) {
$li.find('.cbp-hrsub').hide();
}
});
});
答案 1 :(得分:1)
你动态绑定菜单,如果是,那么如何为ex。如果你使用php,那么在div生成之前检查条件,如果子菜单存在,那么将生成div
答案 2 :(得分:1)
试试这个:
$('.cbp-hrsub').each(function(){
if(!$(this).find('li').length){
$(this).hide();
}
});
$('.cbp-hrsub').each(function(){
if(!$(this).find('li').length){
$(this).hide();
}
});
.cbp-hrsub{border:solid 1px red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<ul>
<li>
<a href="">Media Centre</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<ul>
<li><a href="">Vision And Mission</a></li>
<li><a href="">Strategic Goals</a></li>
<li><a href="">Task of the Department</a></li>
</ul>
</div>
<div>
</div>
</div>
</div>
</li>
<li><a href="">Contact</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<ul>
</ul>
</div>
<div>
</div>
</div>
</div>
</li>
</ul>
</div>
答案 3 :(得分:0)
您的jQuery在页面加载时执行,已经生成的元素。如果你以后生成div,他们将没有'mouseover'属性。
对于动态生成的元素,您应该使用jquery on
函数:
$('.main ul>li>a').on("mouseover", function(){
var $ul = $(this).closest("li").children("ul");
if($ul.length==0) {
$ul.hide();
}
});
请注意,如果您使用空ul隐藏$('.cbp-hrsub')
,即使您可以向其添加元素,它们也会保持隐藏状态