javascript - 使用jquery隐藏li内的div

Question

我有一个像这样的 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>

在第一个 li 中，有子菜单 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没有显示任何效果。

Answer 1

如果你想在鼠标悬停之前隐藏它们，只需在 dom 就绪处理程序中添加以下内容即可

$('.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();
        }
    });
});