How to convert this to onClick vs regular hover?

问题

Here is a Fiddle, to show my current state: (attempting onClick()) http://jsfiddle.net/D5N4f/7/

$('.associationLinks').click(function () {
    alert("I've been clicked"); //test to see if click is working
    //$(this).next().toggle();
    $(this.content).toggle();
    //$(this .content').css("display", "block");
});

here is a version of the working HOVER, that I need to convert to onClick:

http://jsfiddle.net/D5N4f/6/

This is working fine.. however.. on HOVER is just not practical for my use.. I need to change it to onClick..but have the same behavior.

Do I need to use jQuery for this? (I havent been able to get it to work)

the content I want displayed starts off as display:none..

I have tried to show(), toggle() and even .css("display", "block"); (maybe Im not targeting things correctly?)

the last part of this (since there will be MANY links set-up like this) is to close the previous 'SHOW' content.. when I click on a new link.. (ie: only having one content box displayed at a time vs. having several open at same time!)

Please use the fiddle example instead of just random code suggestions! Thanks!

回答1:

http://jsfiddle.net/ks111777/D5N4f/23/

I removed the following CSS:

/*.associationLinks:hover .content {
    display:block;
}*/

I also use a .children() selector to get the content div to display, and I change it's CSS on a click.

Is this closer to what you want? Hiding the image is a bit tricker, and I have an idea for that but I'm not sure if you need it.

来源：https://stackoverflow.com/questions/20409319/how-to-convert-this-to-onclick-vs-regular-hover

标签

onclick