CODEWITHSUNDEEP
javascriptjquery
user2781200
user2781200

Reputation: 13

how to find div with class inside in li with jquery

i have this HTML code

<ul>
        <li><a href="#">test1</a>
            <div class="sub-menu">
                <ul>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#">test2</a></li>
        <li><a href="#">test3</a></li>
        <li><a href="#">test4</a>
            <div class="sub-menu">
                <ul>
                    <li><a href="#">a</a></li>
                    <li><a href="#">b</a></li>
                    <li><a href="#">c</a></li>
                    <li><a href="#">d</a></li>
                </ul>
            </div>
        </li>
    </ul>

that div.sub-menu has hidden in css. i want when hover in a find div that inside in parent li and show it, i try in jquery but when hover in a tag show two sub-menu div, i want when hover in test1 show div.sub-menu that have 1,2,3,4 and when hover in test4 show div.sub-menu that have a,b,c,d

Upvotes: 0

Views: 767

Answers (4)

Pradeep shyam
Pradeep shyam

Reputation: 1292

Try this with slide effect, http://jsfiddle.net/SmtQf/1/ 

$(function () {
   $('ul li').hover(
      function () {
          $('.sub-menu', this).stop(true, true).slideDown(); /*slideDown the subitems on mouseover*/
      }, function () {
          $('.sub-menu', this).stop(true, true).slideUp();  /*slideUp the subitems on mouseout*/
   });
});

Upvotes: 0

Jon
Jon

Reputation: 437904

You can attach a handler for the mouseenter and mouseleave events that manipulates the associated sub-menu, for example like this:

$(document)
   .on("mouseenter", "ul > li > a", function() {
      $(this).siblings(".sub-menu").show();
   })
   .on("mouseleave", "ul > li", function() {
     $(this).children("a").next(".sub-menu").hide();
   });

This snippet installs delegated event handlers that show and hide the sub-menus -- note that the "hide" trigger is different from the "show" trigger because we don't want the menu to disappear as soon as the mouse pointer moves off the anchor. See it in action.

However depending on the desired result you might also be able to do this with pure CSS, e.g.

ul > li > a + .sub-menu { display: none }
ul > li:hover > a + .sub-menu { display: inline-block }

See it in action.

Both versions are structured so that they work also for nested sub-menus.

Upvotes: 1

Rohit R.K.
Rohit R.K.

Reputation: 297

If You want to display menu on hover effect of li then i think u don't need javascript.

if u change css then it is posiible.

write your css like.

  .sub-menu
  {
    display:none;
  }
  li:hover .sub-menu
  {
     display:block
  }

And you have multilevel menu then give them id and repate above procedure

Upvotes: 0

Kevin Bowersox
Kevin Bowersox

Reputation: 94499

Simply hide/show the sub-menu on mouseover/mouseout:

Javascript

$("li").mouseover(function(){
    $("ul", this).show();
});

$("li").mouseout(function(){
    $("ul", this).hide();
});

JS Fiddle: http://jsfiddle.net/EDufY/

Upvotes: 0

Related Questions