如何将其转换为onClick与常规悬停? [英] How to convert this to onClick vs regular hover?

问题描述

这里是一个小提琴，以显示我的当前状态:(尝试onClick()) http://jsfiddle.net/D5N4f/7/

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");
});

这是工作中的HOVER的一个版本，我需要将其转换为onClick:

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

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

这很好用..但是..在HOVER上对我的使用来说是不实际的..我需要将其更改为onClick ..但具有相同的行为.

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.

我需要为此使用jQuery吗? (我无法使其正常工作)

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

我要显示的内容以display:none开头.

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

我试图显示()，切换()甚至.css("display"，"block"); (也许我定位不正确吗?)

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

此操作的最后一部分(因为将有许多这样的链接设置)是关闭先前的"SHOW"内容.当我单击新链接时.(即:仅显示一个内容框)一次与同时打开多个！)

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!

推荐答案

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

我删除了以下CSS:

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

我还使用.children()选择器来显示内容div，然后单击更改CSS.

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.

这篇关于如何将其转换为onClick与常规悬停?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！