Question

The problem I’m having is not being able to select the divs inside the ‘menuItem’ class divs. I’ve tried using the jQuery selector to select by both class and even ID, but every time I try to do anything with it, such as an animation, nothing happens. Is there some jQuery law I don’t know about that prevents me from doing so?

$('.menu')
    .hover( function() { 
        $(this).toggleClass('highlighted'); 
    })
    .click(function() {
        $(this).parent().children('.menuItem').children('#wtf').slideDown();
    });

Also tried these for the click(), but none of them work..

$('#wtf').slideDown();
$('.test').slideDown();
$(this).parent().find('.menuItem').each( function() { $(this).slideDown(); } );
$(this).parent().children('.menuItem').children().slideDown();

---

<div class='box'>
    <div>
        <div class='menu'>Resources</div>

        <div class='menuItem'>
            <div ID='wtf' class='test'>Library</div>
            <div>Internet</div>
            <div>Your mom</div>
        </div>
    </div>

    <div>
        <div class='menu'>Products</div>
    </div>

    <div>
        <div class='menu'>Contact</div>
    </div>
</div>

---

body { font-size: 16px; }

.box {
    background: blue; 
    border: 1px; 
    padding: 4 6 4 6; 
    position: absolute; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border: 2px solid;
}

.box div {
    float: left; 
    text-align:center; 
}

.menu {
    background: lightblue;
    width: 105px;
    text-align: center;
    padding: 4 10;
    margin: 1 5;
    font-weight: bold;
    font-family:'Verdana', 'Times', serif; 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 2px solid gray;
}

.highlighted {
    background: lime;
    color: navy;
}

.menuItem {
    clear: left;
    position: absolute;
    margin-top: 30px;
}

.menuItem div {
    display: none;
    background: lightblue;
    opacity: .7;
    filter: alpha(opacity=.7);
    width: 105px;
    text-align: center;
    padding: 4 10;
    margin: 1 5;
    font-size: 10px;
    font-family: 'Verdana', 'Times', serif; 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 2px solid white;
    clear: left;
}

Answer 1

I applied a background color to your style and your jQuery selector wasn’t selecting properly. I tried this and it changed the background color, but I don’t have CSS in place for the visual of the slideDown() to work – you’ll have to write your CSS up correctly.

$(this).siblings().find(“#wtf”).css(“background-color”,”#cccccc”).slideDown();