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>

这里有第一个孩子为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 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();
        }
    });
});

Answer 2

你动态绑定菜单，如果是，那么如何为ex。如果你使用php，那么在div生成之前检查条件，如果子菜单存在，那么将生成div

Answer 3

试试这个：

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

Answer 4

您的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')，即使您可以向其添加元素，它们也会保持隐藏状态

使用jquery在li中隐藏div

4 个答案: