0

My html code is as follows: (info on bottom)

<!DOCTYPE html>
<html>
    <head>
        <title>My Site</title>
        <link type='text/css' rel='stylesheet' href='style/style1.css'></link>
        <script type='text/javascript' src='scripts/jquery-2.0.0.min.js'></script>
        <script type='text/javascript' src='scripts/script1.js'></script>
    </head>
    <body>
        <div id="title">
            <h1>Welcome to My Site</h1>
        </div>
        <div id='menu_Bar'>
            <div id='home' class='selector'>
                <div class='back'>
                    <ul class='empty'>
                        <li>Home</li>
                        <div style='display: none'>
                            <li><a href=''>option 1</a></li>
                            <li><a href=''>option 2</a></li>
                            <li><a href=''>option 3</a></li>
                            <li><a href=''>option 4</a></li>
                            <li><a href=''>option 5</a></li>
                        </div>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

My jQuery is:

$(document).ready(function() {
    $('.selector').mouseenter(function (){
        $(this.'div ul div').slideToggle('slow');
    });

Now I know the last part won't work (because I would be asking if it did). But I'm sure you see what I'm trying to do. I'm trying to make it so when the selector is hovered over it will open its set of links. I almost was going to use .options for the second part, but realized it would change (or effect) all in same class, which won't allow for similar buttons to be placed on the sides. So how would someone use the parent to affect the child of the parent?

The css:

div {
    border: 1px solid black;
}

.empty {
    list-style: none;
}

.options {
    display: none;
    background-color: lightblue;
}

.selector {
    background-color: transparent;
}

1 Answers1

0

It shoud be

$(document).ready(function() {
    $('.selector').mouseenter(function (){
        $(this).find('> div > ul > div').slideToggle('slow');
    });
});

Demo: Fiddle

Arun P Johny
  • 384,651
  • 66
  • 527
  • 531