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