Jquery導航 - 崩潰/展開

Question

我試圖讓我的jquery在加載時顯示摺疊菜單。現在它正在擴大它。 什麼是最好的方式來改變它？

下面的代碼是magento的分層導航。

  <?php if($this->canShowBlock()): ?> 
      <div class="block block-layered-nav"> 
       <div class="block-title"> 
        <strong><span class="catalog-layer-view-heading"><?php echo $this->__('BROWSE BY') ?></span></strong> 
       </div> 
       <div class="block-content"> 
        <?php echo $this->getStateHtml() ?> 
        <?php if($this->canShowOptions()): ?> 
         <dl id="narrow-by-list"> 
          <?php $_filters = $this->getFilters() ?> 
          <?php $i=0; foreach ($_filters as $_filter): $i++; ?> 
          <?php if($_filter->getItemsCount()): ?> 
           <dt id="filterlabel<?php echo $i;?>"><?php echo $this->__($_filter->getName()) ?> <span class="openthis openthis<?php echo $i;?>">(open)</span></dt> 
           <dd><?php echo $_filter->getHtml() ?></dd> 

           <script type="text/javascript" >   
            jQuery('#filterlabel<?php echo $i;?>').each(function(){ 

             jQuery('.openthis<?php echo $i;?>').css({'display':'block'}); 

             jQuery(this).toggle(function(){ 
              jQuery(this).addClass('hided').next().slideUp(200); 
              jQuery('.openthis<?php echo $i;?>').css({'display':'none'}); 
             },function(){ 
              jQuery(this).removeClass('hided').next().slideDown(200); 
              jQuery('.openthis<?php echo $i;?>').css({'display':'block'}); 
             }) 
            }); 
           </script>      
          <?php endif; ?> 
          <?php endforeach; ?> 
         </dl> 
         <script type="text/javascript">decorateDataList('narrow-by-list')</script> 
        <?php endif; ?> 
       </div> 
      </div> 
      <?php endif; ?> 

Answer 1

您可以使用內置的slideToggle功能：

$('#clickme').click(function() { 
    $('#element').slideToggle('fast', function() { 
    // Animation complete. 
    }); 
}); 

HTH