0
より多くの機能を搭載したアコーディオンとしてカテゴリを表示したい。 最初に、私は3〜4のカテゴリのみを表示したい、より多くのリンクをクリックした後に残りのカテゴリを表示したいと思う。リンクをもう一度クリックすると負荷が少なくなります。loadオプションを使用してaccordion機能を実現するにはどうすればよいですか？
Ref。私はコードの下に使用しています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>