我正在尝试排列我的html / css / jquery，因此我可以通过双击来切换div的可见性

Question

我正在尝试安排我的html / css / jquery，以便可以通过双击div来切换div的可见性。 我可以通过双击使其隐藏， 但是当我再次双击它时，它不会重新出现。 当我查看所有div轮廓时，该div的轮廓不再存在。 我使用Web开发人员插件进行检查。 我正在使用以下代码来尝试完成此任务：

我的css类是..

  .hidden { visibility: hidden; }
    .unhidden { visibility: visible; }

的HTML是...

<div id="ConstructionDiv" ondblclick="unhide('ConstructionDiv')" class="unhidden">
                    <!.. the div is unhidden at page load. When I look at generated
                    source code after the double click the class is "hidden" 
                     -->
            </div>

我的JavaScript是...

function unhide(divID) {
 var item = document.getElementById(divID);
 if (item) {
 item.className=(item.className=='hidden')?'unhidden':'hidden';
 }
 }

可以做我想做的事吗？ 必须有一些有效的方法。 谢谢。

Answer 1

我只是尝试了此操作，不可见的元素无法接收点击事件。

正如安迪所说，不透明度0可以很好地接收点击事件，并且内容仍然不可见。

Answer 2

使用以下CSS规则：

    .hidden {
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
        filter: alpha(opacity=1);
        -moz-opacity:.1;
        -khtml-opacity: .1;
        opacity: .1;
    }

.unhidden {
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        -moz-opacity:1;
        -khtml-opacity: 1;
        opacity: 1;
    }

更新

您也可以将元素包装在其他元素中，例如div，然后单击该div以显示或隐藏内部内容。

Answer 3

如果您有两个div都放置绝对，但一个可能比另一个大得多，该怎么办。 单击一个将更改它们的可见性。