jQuery: CSS Display block not working

Question

I'm trying to make a simple dropdown menu, this is my code so far:
HTML

<div id="menuBox">
    <ul>
        <li>
           <a href="" class="activate">item 1</a>
           <ul class="subs" style="display: none;">
            <li>
                <a href="">Sub 1 </a>
                <a href="">Sub 2 </a>
            </li>
          </ul>
        </li>
        <li>
           <a href="" class="activate">item 1</a>
           <ul class="subs" style="display: none;">
            <li>
                <a href="">Sub 1 </a>
                <a href="">Sub 2 </a>
            </li>
           </ul>
        </li>
    </ul>
</div>

JQUERY

jQuery(".activate").hover(function(){
    jQuery(this).find('.subs').css("display", "block");
}, function(){
    jQuery(this).find('.subs').css("display", "none");
});

When I try it on my site nothing happens, what am I doing wrong?

fix this.. href="class="activate"" should be href="" class="activate" — Aru
– Aru, Commented Oct 16, 2014 at 9:58

James Donnelly · Accepted Answer · 2014-10-16 10:01:56Z

8

You currently have no elements with an .activate class because your HTML is messed up. Change:

<a href="class="activate"">item 1</a>

To:

<a class="activate">item 1</a>

Once you've fixed that, you're still going to have problems as .subs isn't a descendant of .activate. You'll need to use jQuery's next() method to select the .subs element instead:

jQuery(".activate").hover(function(){
    jQuery(this).next('.subs').css("display", "block");
}), function(){
    jQuery(this).next('.subs').css("display", "none");
});

edited Oct 16, 2014 at 10:01

answered Oct 16, 2014 at 9:55

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3164891 Over a year ago

It was correct in my code, just copied it wrong here. And your solution worked, I will accept it when I can

James Donnelly Over a year ago

@user3164891 please see the part of my answer about fixing your jQuery.

Balachandran · Accepted Answer · 2014-10-16 09:56:40Z

0

try

HTML

<div id="menuBox">
    <ul>
        <li>
           <a href="" class="activate">item 1</a>
           <ul class="subs" style="display: none;">
            <li>
                <a href="">Sub 1 </a>
                <a href="">Sub 2 </a>
            </li>
          </ul>
        </li>
        <li>
           <a href="" class="activate">item 1</a>
           <ul class="subs" style="display: none;">
            <li>
                <a href="">Sub 1 </a>
                <a href="">Sub 2 </a>
            </li>
           </ul>
        </li>
    </ul>
</div>

JS

jQuery(".activate").hover(function(){
    jQuery(this).next('.subs').show();
}, function(){
    jQuery(this).next('.subs').hide();
});

DEMO

answered Oct 16, 2014 at 9:56

Balachandran

9,6271 gold badge19 silver badges26 bronze badges

Comments

Amy · Accepted Answer · 2014-10-16 09:59:39Z

-1

<a href="class="activate"">item 1</a>

Corrected above line as:

<p class="activate" style="cursor:pointer;">item 1</p>

answered Oct 16, 2014 at 9:59

Amy

4,0301 gold badge22 silver badges34 bronze badges

Collectives™ on Stack Overflow

jQuery: CSS Display block not working

3 Answers 3

2 Comments

HTML

JS

DEMO

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

HTML

JS

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related