【发布时间】：2017-04-07 11:41:36
【问题描述】：
我想将类别显示为具有加载更多功能的手风琴。 第一次，我只想显示 3-4 个类别，希望在单击加载更多链接后显示剩余的类别。如果再次点击链接，它应该会减少加载。
参考。请看截图：https://drive.google.com/file/d/0B4PokeydRXWebHJabmdXbFVtY2M/view
我正在使用以下代码：
<div class="cat-dropdown" style="margin:25px 0; width:100%; float:left; clear:both">
<?php
$parentCatId = Mage::registry('current_category')->getId();
$root = Mage::getModel('catalog/category')->load($parentCatId);
$subCat = explode(',',$root->getChildren());
$collection = $root
->getCollection()
->addAttributeToSelect("*")
->addFieldToFilter("entity_id", array("in", $subCat) );
?>
<div class="products-grid first odd brand_list1">
<?php foreach($collection as $catname){
$qty = Mage::getModel('catalog/category')->load($catname->getId())->getProductCount();?>
<div class="selected item<?php if (($i - 1) % $_columnCount == 0): ?> first<?php elseif ($i % $_columnCount == 0): ?> last<?php endif; ?>">
<div class="cat-custom-img">
<h2 class="lavel-1"><a href="<?php echo $catname->getUrl(); ?>"><?php echo $catname->getName(); ?></a></h2>
<?php if($catname['sliderimage']) { ?>
<img src="<?php echo Mage::getBaseUrl('media').'catalog/category/'.$catname['sliderimage']; ?>" alt= "" >
<?php } ?>
</div>
<?php $_category = Mage::getModel('catalog/category')->load($catname->getId()) ?>
<?php $_subcategories = $_category->getChildrenCategories() ?>
<?php if (count($_subcategories) > 0){ ?>
<div class="catlist-toggle">
<div class="catlist-toggle-inner">
<ul class="second_level_cat myList">
<?php $limit=1; ?>
<?php foreach($_subcategories as $_subcategory){ ?>
<li class="hide">
<h2><a href="<?php echo $_subcategory->getUrl(); ?>">
<?php echo $_subcategory->getName(); ?>
</a>
</h2>
<?php $_subcategory1 = Mage::getModel('catalog/category')->load($_subcategory->getId()) ?>
<?php $_subsubcategories1 = $_subcategory1->getChildrenCategories() ?>
<?php if (count($_subsubcategories1) > 0){ ?>
<ul class="third_level_cat myList">
<?php foreach($_subsubcategories1 as $_subsubcategory){ ?>
<li class="hide">
<h2><a href="<?php echo $_subsubcategory->getUrl(); ?>" >
<?php echo $_subsubcategory->getName(); ?>
</a></h2>
<?php $_subcategory2 = Mage::getModel('catalog/category')->load($_subsubcategory->getId()) ?>
<?php $_subsubcategories2 = $_subcategory2->getChildrenCategories() ?>
<?php if (count($_subsubcategories2) > 0){ ?>
<ul class="fourth_level_cat myList">
<?php foreach($_subsubcategories2 as $_subsubcategory2){ ?>
<li class="hide">
<h2><a href="<?php echo $_subsubcategory2->getUrl(); ?>" >
<?php echo $_subsubcategory2->getName(); ?>
</a></h2>
</li>
<?php } ?>
</ul>
<?php } ?>
</li>
<?php } ?>
</ul>
<?php } ?>
</li>
<?php $limit++; ?>
<?php // if($limit == 3){break;} ?>
<?php } ?>
<li class=""><div class="load-more">Load more</div></li>
</ul>
</div>
</div>
<?php } ?>
</div>
<?php } ?>
</div>
</div>
<script>
jQuery('.cat-dropdown').navAccordion({
expandButtonText : "+",
collapseButtonText: "-",
selectedExpand: "true",
selectedClass: "selected",
buttonPosition: "right",
headersOnly: false,
headersOnlyCheck: false,
delayLink: false,
delayAmount: null
});
</script>
<script>
jQuery(document).ready(function(){
jQuery(".load-more").click(function(){
jQuery(this).closest('.selected').find('.catlist-toggle').toggleClass('expand');
});
jQuery(".accordion-btn").click(function(){
jQuery(this).closest('.selected').find('.catlist-toggle').addClass('expand');
});
});
</script>
<style>
.selected.item{width: 23%;float: left;margin: 0 10px 55px 10px;}
.catlist-toggle{position: relative; }
.catlist-toggle.expand{height:auto;overflow:initial;}
.catlist-toggle.expand .catlist-toggle-inner ul{height:auto;overflow:initial;}
.catlist-toggle .catlist-toggle-inner{position: relative; width: 100%; top:0; left: 0; background:#fff; z-index:9999;}
.catlist-toggle .catlist-toggle-inner ul{ z-index:9999; height: 220px;overflow:hidden; width:100%;}
.catlist-toggle .load-more{position: absolute; width: 100%; bottom:0; left: 0; background:#ddd; color:#000;}
.cat-custom-img .level-1{ width: 70%;}
.cat-custom-img img{ width: 20%;float: right; margin-top: -71px;}
</style>
【问题讨论】：