Question

我在扩展/折叠jquery脚本下面有一个测试。在页面加载时，它会将div显示为已折叠，因此您必须单击它以显示信息。

如何对此进行反转，以便在加载时将其展开并单击它，它会折叠？

<style>
p.toggler{cursor: pointer;}
span.closeSlider{cursor: pointer;}
.slider{
    display:none;
}
.collapseSlider{
    display:none;
}
.sliderExpanded .collapseSlider{
    display:block;
}
.sliderExpanded .expandSlider{
    display:none;
}
</style>
<script>
function toggleSlides(){
    $('.toggler').click(function(e){
        var id=$(this).attr('id');
        var widgetId=id.substring(id.indexOf('-')+1,id.length);
        $('#'+widgetId).slideToggle();
        $(this).toggleClass('sliderExpanded');
        $('.closeSlider').click(function(){
                $(this).parent().hide('slow');
                var relatedToggler='toggler-'+$(this).parent().attr('id');
                $('#'+relatedToggler).removeClass('sliderExpanded');
        });
    });
};
$(function(){
    toggleSlides();
});
</script>



<p class="toggler" id="toggler-slideTwo">
    <span class="expandSlider">SHOW</span><span class="collapseSlider">HIDE</span>
</p>
<div class="slider" id="slideTwo">
    <p>Slide Two lorem ipsum tupsum...</p>
    <span class="closeSlider">Close</span>
</div>

Answer 1

尝试此操作...将.slider{ display:none; }更改为.slider{ display:block; }，然后切换“显示”和“隐藏”文本。它可以工作，但是查看代码，类名等可能会让人感到困惑。这取决于你修复：）

http://jsfiddle.net/HPTmg/

反向折叠/展开jquery脚本

1 个答案: