click() 上的 JQuery css(...,...) 函数适用于 JSFiddle 但不适用于 Firefox/Chrome

Question

我有一张 map ，周围放置了几台打印机，将鼠标悬停在打印机上时，会出现本地打印机列表。我想通过 JQuery 将“悬停”转换为“单击”时的 Action 。

这是我的代码(使用 HTML、CSS 和 JQuery):http://jsfiddle.net/K2e4E/

    $(document).ready(function () {
          $('#r1242').click( function() {
                $('#p1242').css("display","block");
          });
    });

阅读所有代码可能无济于事；但是，我已经提供了所有这些。将打印机的图片放入 jsfiddle 时会出现错误，但我的重点是左侧底部的打印机图像。单击时，它会使可用打印机列表保留下来，而不是在悬停离开后消失。

这在 jsfiddle 中有效，但是当我在 Mozilla Firefox 或 Google Chrome 上打开我的文件时，这不适用。该特定打印机的可用打印机列表不会显示。这是为什么？

更新:

我认为我在 HTML、CSS 和 JQuery 之间的链接可能存在错误，但所有这些更改都在 JSFiddle 中起作用，但是当我在本地应用更改并尝试在 Web 浏览器中打开我的文件时，JQuery 函数永远不要申请。这是我在 HTML 文件中的内容。

    <script src="jquery-ui.js"></script>
    <link rel="stylesheet" type='text/css' href="main.css"/>
    <script type='text/javascript' src='script.js'></script>

Answer 1

以1463房间为例

将此类添加到您的 CSS；

.show{
 display:block!important;   
}

注释掉悬停；

/* #r1463:hover > #p1463 {
    display:block;
}
*/

然后在您的 HTML 中；

<div id="r1463" onclick="$('#p1463').toggleClass('show');">

在这里更新了 fiddle ； http://jsfiddle.net/K2e4E/2/