CODEWITHSUNDEEP
javascriptjquery
Arun
Arun

Reputation: 1472

Hide a div inside the li using jquery

I have a html structure for navigation like this. It is dynamically creating the navigation.

<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>

Here in the first li having children as ul and li(sub menu). But the second li has no sub menu.but the div is showing in front end. The menu and sub menu is programatically coming so I can't remove the div cbp-hrsub.I need to change the div display none when the li has no children.

I tried: 

 <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>

Like this, but the div is showing no effect.

Upvotes: 0

Views: 1026

Answers (4)

Alexandru Severin
Alexandru Severin

Reputation: 6218

Your jQuery executes when the page is loaded, on the elements already genearted. If you later generate divs they will not have that 'mouseover' property.

For dynamically generated elements you should use jquery on function:

   $('.main ul>li>a').on("mouseover", function(){
        var $ul = $(this).closest("li").children("ul");
        if($ul.length==0) {
           $ul.hide();
        }
  });

Note that if you hide$('.cbp-hrsub') with empty ul, they will remain hidden even after you might add elements to it

Upvotes: 0

Jai
Jai

Reputation: 74738

Try this:

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

Upvotes: 1

Architect - Hitesh
Architect - Hitesh

Reputation: 1239

are you bind the menu dynamically ,if yes then how for ex. if you use php then check condition before div generating if sub-menu is exist then the div will be generated

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

If you want to hide them before the mouseover, just add the below in in dom ready handler

$('.main .cbp-hrsub').not(':has(li)').hide()

else

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

Upvotes: 3

Related Questions