jQuery简单的可折叠div？

Posted 2023-03-24

【中文标题】jQuery简单的可折叠div？

【英文标题】：jQuery Simple Collapsible Div?

【发布时间】：2012-01-19 16:23:39

【问题描述】：

我正在寻找合适的、简单的、小的代码来执行以下操作：

单击应用了类的元素。

DIV.CLASS - 展开并显示隐藏内容。 （向下滑动 - 切换）

DIV.CLASS - 折叠并隐藏之前显示的内容。 （上滑 - 切换）

我在这里创建了一个 jsFiddle：http://jsfiddle.net/Q4PUw/1/

所以为了模糊和简单，我需要知道如何让 DIV CLASS 隐藏和可见，一旦同一页面上的元素应用了 CLASS，其中将激活和停用 HIDDEN 和/或 VISIBLE html 内容。我需要默认隐藏它。

我浏览了整个互联网，只发现了非常复杂的脚本，但并不简单。我找到了 Simple Accordians...但是那些永远不会关闭，他们只是打开另一个。

感谢大家的帮助，我希望我可以为很多其他人回答同样的问题......

注意：我对 javascript 甚至 jQuery 知之甚少。

【参考方案1】：

$('.expand-one').click(function()
    $('.content-one').slideToggle('slow');
);

演示：http://jsfiddle.net/Q4PUw/2/

【讨论】：

是我还是使用“slideToggle”然后使用 .accordion 加载得更快？

【参考方案2】：

我在看这个，想要一个已经为我设计的可折叠 div。然后我意识到我想要的是一个单窗格 jquery-ui 手风琴。

<div id="collapse">
   <h3>Collapse and Expand</h3>
   <div>Content</div>
</div>
<script>
$( "#collapse" ).accordion(
    collapsible: true,
    active: false
);
</script>

http://jsfiddle.net/MB4ch/1/

【讨论】：

注意，这是 jQueryUI，不是普通的 jQuery。

【参考方案3】：

我想用多个 div 来做到这一点，每个 div 都有自己的触发器。基于 AlienWebguy 的上述回答：

HTML

<div>
    <p class="expand" id="expand-1">more 1...</p>
</div>
<div class="expandable" id="expandable-1">
    <p>1. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
<div>
    <p class="expand" id="expand-2">more 2...</p>
</div>
<div class="expandable" id="expandable-2">
    <p>2. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>

Javascript

$('.expand').click(function()
    target_num = $(this).attr('id').split('-')[1];
    content_id = '#expandable-'.concat(target_num);
    $(content_id).slideToggle('fast');
);

CSS

.expand 
    font-weight: bold;
    font-style: italic;
    font-size: 12px;
    cursor: pointer;

.expandable 
    display:none;

div 
    margin: 10px;

https://jsfiddle.net/Q4PUw/3767/

【讨论】：

正是我正在寻找的简单解决方案的类型。 +1

实际上，出于某种原因，此脚本在我的页面上的每个 .expandable 项目执行一次...知道为什么会发生这种情况吗？

【参考方案4】：

使用手风琴是个坏主意。 更好的是创建自己的可折叠块。

例子：

function InitSpoilBlock(idClicked)
    
        $(idClicked).on('click', function(e)
            var textArray = ['blind','slide'];//here you can add other effects

            var randomEffect = textArray[Math.floor(Math.random()*textArray.length)];

            $(e.target).parent().children(".HiderPanel").toggle(randomEffect);
        );
    

所以当你写这样的html时：

<div class="HiderContainer">
    <a href="#" class="Hider">More</a>
    <div class="HiderPanel">
        Spoiled block of html
    </div>
</div>

页面加载后你会调用

InitSpoilBlock('.Hider');

所有方块都可以通过随机动画折叠和隐藏。或者你也可以使用一个精确的动画。