显示隐藏多个div

Question

我有多个div标签，它排列为有序列表，并在页面上载时仅显示标题。

我想显示隐藏区域但是 1 - OnMouseOver和OnMouseOut时隐藏文本展开/折叠 2 - 单击该div时隐藏文本保持可见

我真的很感激任何帮助，我花了一整天的时间来寻找有用的东西，但是他们没有工作。

Answer 1

如果你可以使用jquery - 它很容易。

简单手风琴的HTML：

<div id="Accordion">
    <div>
        <div class="Title">Visible</div>
        <div class="Boxen">Hidden</div>
    </div>
    <div>
        <div class="Title">Visible</div>
        <div class="Boxen">Hidden</div>
    </div>
</div>

CSS：

.Title {
    width:400px;
    height:30px;
    background-color:green;
}
.Boxen {
    width:400px;
    height: 150px;
    background-color:pink;
    display: none;
}

Jquery的：

$(".Title").hover(function () {
    $(this).next(".Boxen").slideToggle();
});

FIDDLE

编辑：更新小提琴以显示简单的手风琴

Answer 2

无法悬停隐藏的元素 - .hover()无法绑定任何内容。

opacity似乎是一种解决方案 - 例如，另一个Stack Exchange问​​题，Hover over a hidden element to show it

试试这个：

$('#hidden').on({
    mouseover: function() {
        $(this).fadeTo(1,1);
    },mouseleave: function() {
        $(this).fadeTo(1,0);
    },click: function() {
        $(this).off('mouseleave');
    }
});

参见Fiddle demo（从@fnostro分拆出来）。我的来源是from here。

Answer 3

我认为你需要一个类似手风琴的结构..请检查这个Fiddle，这可能对你有帮助..

Answer 4

我在这里更新了另一个Fiddle，这是您应用程序最合适的结构。

此处可以添加任意数量的块名称 block 。每个块应包含一个 parent 元素和 child 元素。在父母把你的标题或摘要和孩子放在你的内容。您也可以根据自己的要求修改此结构。