Css Jquery导航-折叠/展开

我试图让我的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; ?>

您可以使用内置的滑动切换功能：

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

HTH
您可以使用内置的滑动切换功能：

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

HTH
这在代码中。我只需要将css的默认值设为“hide/collapsed”，而不是visible。这在代码中。我只需要将css的默认值设置为“隐藏/折叠”而不是“可见”