反向崩潰/展開jQuery腳本

我已經在展開/摺疊jquery腳本下面進行了測試。目前在頁面加載時，它顯示div已摺疊，因此您必須點擊它才能顯示信息。反向崩潰/展開jQuery腳本

我該如何反轉這一點，以便在加載它時展開並點擊它，它會崩潰？

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

來源

2012-01-27 Rob

試試這個...更改.slider{ display:none; }到.slider{ display:block; }，並切換「顯示」和「隱藏」的文本。它的工作原理，但看代碼，類名等可能會混淆..這是由你來修復:)

http://jsfiddle.net/HPTmg/

來源

2012-01-27 10:57:00

反向崩潰/展開jQuery腳本

回答

相關問題