Jquery 显示隐藏多个div

我有多个div标签，它们像有序列表一样排列，并且在页面加载时只显示标题

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

我真的很感谢你的帮助，我花了一整天的时间去寻找一些有用的东西，但它们都不起作用

---

如果您可以使用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>

Jquery：

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

---

编辑：更新了fiddle以显示简单的手风琴

不可能将隐藏元素悬停-没有

.hover（）

可以绑定的内容

不透明度

似乎是一个解决方案-例如，参见另一个堆栈交换问题

试试这个：

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

---

请参阅（从@fnostro派生）。我的来源是。

我想你需要一个手风琴式的结构。。请检查此项，这可能对您有所帮助。

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

---

在这里，可以使用类名添加任意数量的块。每个块应该包含一个

父元素和
子元素。在家长栏中填写标题或摘要，在孩子栏中填写内容。您还可以根据需要修改此结构
 谢谢你的回复（也是fnostro），不过，我的问题是大约有20个项目，比如。。。。等等，非常欢迎。仅供参考，为了便于阅读，我用一个包含div的div包装了这对div，它们可以被删除，但仍然会有相同的效果。亲爱的@soundar-r。再次感谢您的精彩代码，但不幸的是，您的代码使所有内容（尤其是图像）在子div中的高度都达到150px。此外，我在父div中有一个复选框，当我将鼠标移到复选框上时，父div将在下方移动约150px。你知道怎么解决这个问题吗？因为如果代码中只有文本（包括父div和子div），那么代码就非常好用。我已经按照您的意愿更新了结构。请查收。我已经在下一个答案中更新了细节。亲爱的Soundar-r。如果我再打扰你，你会不高兴吗？IE显示不正确，所有子区域左缩进约40像素，底部隐藏约20像素。此外，始终可见的区域从顶部有10px。不知道如何修复IE。再次感谢您的帮助。嗨，yener，您能说出您使用过哪个版本的IE浏览器吗。？你能更新一个代码片段或小提琴来检查你的问题吗。。因为我已经在IE10，IE11中测试过了，在那里它工作得很好..亲爱的Soundar-r。非常抱歉，我的警报有误。我想出来了。问题是div宽度不够。所以，我为div留出了足够的空间，它位于父div的内部，现在效果非常好。请原谅我的错误警报。你是一个伟大的人。再次非常感谢你。我真的很感谢你的帮助
$('#hidden').on({
    mouseover: function() {
        $(this).fadeTo(1,1);
    },mouseleave: function() {
        $(this).fadeTo(1,0);
    },click: function() {
        $(this).off('mouseleave');
    }
});