Question

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

点击带有应用类的元素。
DIV.CLASS - 扩展并显示隐藏的内容。（slideDown - Toggle）
DIV.CLASS - 折叠并隐藏之前显示的内容。（slideUp - Toggle）

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

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

我已经浏览了整个互联网，只发现了非常复杂的脚本，但并不简单。我找到了简单的手风琴......但是那些从不关闭的人，他们只是打开另一个。

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

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

Answer 1

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

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

Answer 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/

Answer 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/

Answer 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');

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

jQuery Simple Collapsible Div？

4 个答案: