convert css hover to jquery onclick for div layer

Question

We have a header, with username on it. Essentially, for now, the user hovers over there username and precariously moves the mouse onto the div to retain focus, and access different account functionality.

But it is crap to be honest, and I wanted to convert it to onclick, ala google style.

Here is a screenpic of what we have.

enter image description here

Here is what I would like to achieve.

enter image description here

Wondering if anyone knows how to do this.

Sample fiddle here: http://jsfiddle.net/ozzy/WkLBF/

Essentially, I want it so user clicks on the name and the div panel displays and remains until they click again.

Any help appreciated, we use jquery if thats any consolation ( this demo uses no javascript at all at present )

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

Well... this will work as far as you have described, but I'm not sure it's exactly what you want. :P Could you expound?

Demo

$(".category-filter>li").click(function(){
    $(this).children("ul").toggle();
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 27, 2011 at 0:14

Joseph Marikle

78.8k18 gold badges114 silver badges130 bronze badges

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

2 Comments

422 Over a year ago

ahhh toggle, I am such a knob. Good Onya

Joseph Marikle Over a year ago

@422 nah you're not, :P it happens to all of us (due in part with the fact that you can do the same thing 15 different ways in jQuery).

Stefan · Accepted Answer · 2011-09-27 00:29:07Z

2

http://jsfiddle.net/WkLBF/25/

Javascript:

jQuery(document).ready(function($){
    $('ul li a').live('click', function(){
        if($('.category-filter>li:hover>ul').css('display')=='none')
        {
            $('.category-filter>li:hover>ul').css('display', 'block');
            $(this).addClass('userbox-on');
        }
        else
        {
            $('.category-filter>li:hover>ul').css('display', 'none');
            $(this).removeClass('userbox-on');
        }
    });
});

CSS:

.userbox-on
{
  border: 1px solid red;
  border-bottom: none;  
  background-color: #fff;
    padding: 5px;
}

answered Sep 27, 2011 at 0:29

Stefan

213 bronze badges

1 Comment

422 Over a year ago

thanks @stefan, looking at both sets of code, my html and css is far too complex, I need to totally simplify it and then control it with js properly. Thanks

Collectives™ on Stack Overflow

convert css hover to jquery onclick for div layer

2 Answers 2

Demo

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related