我试图让我的 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; ?>
最佳答案
您可以使用内置的 slideToggle 函数:
$('#clickme').click(function() {
$('#element').slideToggle('fast', function() {
// Animation complete.
});
});
HTH
关于css - Jquery 导航 - 折叠/展开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11250160/