CODEWITHSUNDEEP
jqueryhtmlmenusubmenu
AliRıza Adıyahşi
AliRıza Adıyahşi

Reputation: 15866

li element hover event and show sub menu?

html codes

<ul class="menu">
<li>deneme</li>
<li>deneme
    <ul>
        <li>alt menu</li>
        <li>alt menu</li>
        <li>alt menu</li>
        <li>alt menu</li>
        <li>alt menu</li>
    </ul>
</li>
<li>deneme
    <ul>
        <li>alt menu</li>
        <li>alt menu</li>
        <li>alt menu</li>
        <li>alt menu</li>
        <li>alt menu</li>
    </ul>
</li>
<li>deneme</li>
<li>deneme</li>
<li>deneme
    <ul>
        <li>alt menu</li>
        <li>alt menu</li>
        <li>alt menu</li>
        <li>alt menu</li>
        <li>alt menu</li>
    </ul>
</li>
<li>deneme</li>
</ul>​

javascript:

$(document).ready(function(){
    $("ul.menu > li").css("color","red");
    $("li ul li").css("color","blue")
    $("li ul li").hide();
    $("ul.menu li").hover(
        function() {
            $("li ul li").show();
        },
        function() {
            $("li ul li").hide();
        }
    );
});​

And my question, I want to show current's submenu item with hover event. But this code show all sub menus. How can I fix it ?

Thanks.

Upvotes: 0

Views: 9936

Answers (4)

Zach dev
Zach dev

Reputation: 1620

Here's something that can help you

 $(document).ready(function(){

$("ul.menu > li").css("color","red");
 $("li ul li").css("color","blue")
$("li ul li").hide();
$("ul.menu li").hover(
    function() {
    $(this).find("li").slideDown('slow');
    },
    function() {
    $(this).find("li").slideUp('slow');
    }

);

});​

Upvotes: 1

scottheckel
scottheckel

Reputation: 9244

You should take this in the hover which will be your LI that the user is hovering over, and find the lis inside of it and show those. Like the following (jsFiddle):

$(document).ready(function(){

  $("ul.menu > li").css("color","red");
  $("li ul li").css("color","blue")
  $("li ul li").hide();
  $("ul.menu li").hover(
    function() {
        $(this).find("li").show();
    },
    function() {
        $(this).find("li").hide();
    }
  );
});​

Upvotes: 1

Esailija
Esailija

Reputation: 140228

http://jsfiddle.net/eygsY/24/

Provide context for your selector (Only search below this, not the whole document):

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

Upvotes: 1

Chandu
Chandu

Reputation: 82913

Provide a context for the element selection in the hover handler.

Try this:

$(document).ready(function() {

    $("ul.menu > li").css("color", "red");
    $("li ul li").css("color", "blue")
    $("li ul li").hide();
    $("ul.menu li").hover(

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

    );

});​

Working example: http://jsfiddle.net/eygsY/22/

Upvotes: 1

Related Questions